/* Stable containers for dashboard/workspace screens.
   These screens must not stretch when public site page-builder widths change. */
.dashboard-page-container {
  width: min(calc(100% - 32px), 1280px);
  max-width: 1280px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .dashboard-page-container {
    width: min(calc(100% - 48px), 1280px);
  }
}

@media (min-width: 1024px) {
  .dashboard-page-container {
    width: min(calc(100% - 64px), 1280px);
  }
}

.site-submenu-link {
  color: var(--menu-submenu-link-color, #374151);
}

.site-submenu-link:hover {
  color: var(--menu-submenu-link-hover-color, #111827);
  background: var(--menu-submenu-link-hover-bg, rgba(0, 0, 0, 0.06));
}

/* Route-level chrome control.
   Admin pages use their own shell; the public header/footer would duplicate
   navigation and break the mobile admin layout. */
html.admin-route,
html.admin-route body,
body.admin-route {
  background: #09090b;
}

html.admin-route .site-public-chrome,
body.admin-route .site-public-chrome {
  display: none !important;
}

html.admin-route .site-main,
body.admin-route .site-main {
  min-height: 100vh;
  background: #09090b;
  color: #f4f4f5;
}

/* Avoid browser text-carets on static interface labels in some browsers.
   Real text inputs and rich text editors keep the normal caret. */
body
  :not(input):not(textarea):not([contenteditable="true"]):not(.tiptap):not(
    .ProseMirror
  ) {
  caret-color: transparent;
}

input,
textarea,
[contenteditable="true"],
[contenteditable="true"] *,
.tiptap,
.tiptap *,
.ProseMirror,
.ProseMirror * {
  caret-color: auto;
}

button,
[role="button"],
a[href],
.site-public-chrome button,
.site-public-chrome [role="button"] {
  cursor: pointer;
}

/* Reader mode interaction controls */
.reader-bottom-actions a,
.reader-bottom-actions button,
.reader-final-action a,
.reader-final-action button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--reader-action-border) !important;
  border-radius: 14px !important;
  background: var(--reader-action-bg) !important;
  color: var(--reader-action-text) !important;
  padding: 0 1.1rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

.reader-bottom-actions {
  justify-content: flex-end !important;
}

.reader-final-action,
.reader-final-action > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
}

.reader-final-action > div > div {
  margin-top: 0 !important;
}

@media (min-width: 640px) {
  .reader-bottom-actions a,
  .reader-bottom-actions button,
  .reader-final-action a,
  .reader-final-action button {
    width: 282px !important;
    min-width: 282px !important;
    max-width: 282px !important;
    flex: none !important;
  }
}

@media (max-width: 639px) {
  .reader-bottom-actions,
  .reader-final-action,
  .reader-final-action > div {
    width: 100% !important;
  }

  .reader-bottom-actions a,
  .reader-bottom-actions button,
  .reader-final-action a,
  .reader-final-action button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

.reader-bottom-actions a:hover,
.reader-bottom-actions button:hover,
.reader-final-action a:hover,
.reader-final-action button:hover {
  background: var(--reader-action-hover-bg) !important;
  color: var(--reader-action-hover-text) !important;
  opacity: 1 !important;
}

.reader-selection-tools {
  isolation: isolate;
}

.reader-selection-tools button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px !important;
  white-space: nowrap;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    filter 0.16s ease;
}

.reader-selection-tools button:hover {
  opacity: 1;
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.reader-selection-tools textarea::placeholder {
  color: currentColor;
  opacity: 0.58;
}

.beta-review-jump-highlight {
  animation: beta-review-jump-pulse 1.8s ease-in-out;
}

@keyframes beta-review-jump-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.35),
      0 0 0 0 rgba(251, 191, 36, 0);
  }
  35% {
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, 0.75),
      0 0 0 12px rgba(251, 191, 36, 0.2);
  }
}

/* Writer editor sticky tools: keep normal cards calm, but make the sticky/floating
   state visibly separate from the text surface. */
.writer-tools-panel {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.writer-tools-panel--floating {
  background: linear-gradient(
    135deg,
    rgba(8, 47, 73, 0.98),
    rgba(24, 24, 27, 0.98) 52%,
    rgba(30, 27, 75, 0.98)
  ) !important;
  border-color: rgba(56, 189, 248, 0.72) !important;
  box-shadow:
    0 20px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(125, 211, 252, 0.18),
    0 0 32px rgba(14, 165, 233, 0.16) !important;
}

.writer-tools-panel--floating h2 {
  color: #e0f2fe !important;
}

.writer-tools-panel--floating p,
.writer-tools-panel--floating label {
  color: #cbd5e1 !important;
}

.writer-tools-panel--floating details {
  background: rgba(2, 6, 23, 0.72) !important;
  border-color: rgba(56, 189, 248, 0.38) !important;
}

@media (max-width: 767px) {
  .writer-tools-panel--floating {
    max-height: 34vh !important;
    border-radius: 18px !important;
  }
}

/* Admin-configurable author/dashboard theme tokens. Public header/footer and CMS widgets still keep their own admin/CMS colors. */
.dashboard-route .site-main {
  background: var(--yw-dashboard-bg);
  color: var(--yw-dashboard-text);
}

.writer-editor-route .site-main {
  background: var(--yw-editor-bg);
  color: var(--yw-editor-text);
}

.dashboard-route .bg-zinc-950,
.dashboard-route .bg-zinc-950\/80,
.dashboard-route .bg-zinc-950\/70,
.dashboard-route .bg-zinc-950\/60,
.dashboard-route .bg-zinc-950\/40,
.dashboard-route .bg-zinc-900,
.dashboard-route .bg-zinc-900\/80,
.dashboard-route .bg-zinc-900\/70,
.dashboard-route .bg-zinc-900\/60,
.dashboard-route .bg-neutral-950,
.dashboard-route .bg-neutral-900 {
  background-color: var(--yw-dashboard-surface) !important;
}

.dashboard-route .bg-black,
.dashboard-route .bg-black\/80,
.dashboard-route .bg-black\/70,
.dashboard-route .bg-black\/60,
.dashboard-route .bg-black\/50,
.dashboard-route .bg-black\/40 {
  background-color: var(--yw-dashboard-surface-alt) !important;
}

.dashboard-route .border-zinc-950,
.dashboard-route .border-zinc-900,
.dashboard-route .border-zinc-800,
.dashboard-route .border-zinc-700,
.dashboard-route .border-white\/10,
.dashboard-route .border-white\/15,
.dashboard-route .border-white\/20 {
  border-color: var(--yw-dashboard-border) !important;
}

.dashboard-route .text-white,
.dashboard-route .text-zinc-50,
.dashboard-route .text-zinc-100,
.dashboard-route .text-zinc-200,
.dashboard-route .text-neutral-50,
.dashboard-route .text-neutral-100 {
  color: var(--yw-dashboard-text) !important;
}

.dashboard-route .text-zinc-300,
.dashboard-route .text-zinc-400,
.dashboard-route .text-zinc-500,
.dashboard-route .text-neutral-300,
.dashboard-route .text-neutral-400,
.dashboard-route .text-neutral-500 {
  color: var(--yw-dashboard-muted) !important;
}

.dashboard-route input,
.dashboard-route textarea,
.dashboard-route select {
  border-color: var(--yw-dashboard-border);
}

.dashboard-route .shadow-black\/20,
.dashboard-route .shadow-black\/30,
.dashboard-route .shadow-black\/40,
.dashboard-route .shadow-black\/50 {
  --tw-shadow-color: rgb(15 23 42 / 0.12) !important;
}

.writer-editor-route .bg-zinc-950,
.writer-editor-route .bg-zinc-950\/80,
.writer-editor-route .bg-zinc-950\/70,
.writer-editor-route .bg-zinc-950\/60,
.writer-editor-route .bg-zinc-900,
.writer-editor-route .bg-zinc-900\/80,
.writer-editor-route .bg-zinc-900\/70,
.writer-editor-route .bg-neutral-950,
.writer-editor-route .bg-neutral-900 {
  background-color: var(--yw-editor-toolbar) !important;
}

.writer-editor-route .border-zinc-950,
.writer-editor-route .border-zinc-900,
.writer-editor-route .border-zinc-800,
.writer-editor-route .border-zinc-700,
.writer-editor-route .border-white\/10,
.writer-editor-route .border-white\/15,
.writer-editor-route .border-white\/20 {
  border-color: var(--yw-editor-border) !important;
}

.writer-editor-route .text-white,
.writer-editor-route .text-zinc-50,
.writer-editor-route .text-zinc-100,
.writer-editor-route .text-zinc-200 {
  color: var(--yw-editor-text) !important;
}

.writer-editor-route .text-zinc-300,
.writer-editor-route .text-zinc-400,
.writer-editor-route .text-zinc-500 {
  color: var(--yw-editor-muted) !important;
}

.writer-editor-route .bg-white {
  background-color: var(--yw-editor-page) !important;
}

.writer-editor-route .professional-work-details-modal,
.dashboard-route .professional-work-details-modal {
  background: var(--yw-modal-bg) !important;
  color: var(--yw-modal-text) !important;
  border-color: var(--yw-modal-border) !important;
}

/* Workspace theme bridge.
   Dashboard, personal library, reading library, messages and author work forms
   must follow the color preset from Admin -> Theme settings. These rules keep
   existing components working while moving old hard-coded dark Tailwind classes
   onto the shared workspace tokens. */
.dashboard-route .site-main,
.dashboard-workspace {
  background: var(--yw-dashboard-bg) !important;
  color: var(--yw-dashboard-text) !important;
  --site-background: var(--yw-dashboard-bg);
  --site-foreground: var(--yw-dashboard-text);
  --site-muted-foreground: var(--yw-dashboard-muted);
  --site-background-fg: var(--yw-dashboard-text);
  --site-background-muted: var(--yw-dashboard-muted);
  --site-surface: var(--yw-dashboard-surface);
  --site-surface-fg: var(--yw-dashboard-text);
  --site-surface-muted: var(--yw-dashboard-muted);
  --site-surface-alt: var(--yw-dashboard-surface-alt);
  --site-surface-alt-fg: var(--yw-dashboard-text);
  --site-surface-alt-muted: var(--yw-dashboard-muted);
  --site-border: var(--yw-dashboard-border);
  --site-primary-button-bg: var(--yw-button-primary-bg);
  --site-primary-button-text: var(--yw-button-primary-text);
}

.dashboard-workspace.bg-site-background,
.dashboard-workspace .bg-site-background {
  background-color: var(--yw-dashboard-bg) !important;
}

.dashboard-workspace .site-surface,
.dashboard-workspace .site-surface-alt {
  border-color: var(--yw-dashboard-border) !important;
}

.dashboard-workspace .bg-zinc-950,
.dashboard-workspace .bg-zinc-950\/95,
.dashboard-workspace .bg-zinc-950\/90,
.dashboard-workspace .bg-zinc-950\/80,
.dashboard-workspace .bg-zinc-950\/70,
.dashboard-workspace .bg-zinc-950\/60,
.dashboard-workspace .bg-zinc-950\/50,
.dashboard-workspace .bg-zinc-950\/40,
.dashboard-workspace .bg-zinc-900,
.dashboard-workspace .bg-zinc-900\/95,
.dashboard-workspace .bg-zinc-900\/90,
.dashboard-workspace .bg-zinc-900\/80,
.dashboard-workspace .bg-zinc-900\/70,
.dashboard-workspace .bg-zinc-900\/60,
.dashboard-workspace .bg-zinc-900\/50,
.dashboard-workspace .bg-neutral-950,
.dashboard-workspace .bg-neutral-900,
.dashboard-workspace .bg-stone-950,
.dashboard-workspace .bg-stone-900,
.dashboard-workspace .bg-gray-950,
.dashboard-workspace .bg-gray-900 {
  background-color: var(--yw-dashboard-surface) !important;
}

.dashboard-workspace .bg-zinc-800,
.dashboard-workspace .bg-zinc-800\/80,
.dashboard-workspace .bg-zinc-800\/60,
.dashboard-workspace .bg-zinc-800\/50,
.dashboard-workspace .bg-neutral-800,
.dashboard-workspace .bg-gray-800 {
  background-color: var(--yw-dashboard-surface-alt) !important;
}

.dashboard-workspace .bg-black,
.dashboard-workspace .bg-black\/95,
.dashboard-workspace .bg-black\/90,
.dashboard-workspace .bg-black\/80,
.dashboard-workspace .bg-black\/70,
.dashboard-workspace .bg-black\/60,
.dashboard-workspace .bg-black\/50,
.dashboard-workspace .bg-black\/40,
.dashboard-workspace .bg-black\/30 {
  background-color: var(--yw-dashboard-surface-alt) !important;
}

.dashboard-workspace .border-zinc-950,
.dashboard-workspace .border-zinc-900,
.dashboard-workspace .border-zinc-800,
.dashboard-workspace .border-zinc-700,
.dashboard-workspace .border-neutral-900,
.dashboard-workspace .border-neutral-800,
.dashboard-workspace .border-gray-900,
.dashboard-workspace .border-gray-800,
.dashboard-workspace .border-white,
.dashboard-workspace .border-white\/10,
.dashboard-workspace .border-white\/15,
.dashboard-workspace .border-white\/20,
.dashboard-workspace .border-white\/30 {
  border-color: var(--yw-dashboard-border) !important;
}

.dashboard-workspace .text-white,
.dashboard-workspace .text-black,
.dashboard-workspace .text-zinc-50,
.dashboard-workspace .text-zinc-100,
.dashboard-workspace .text-zinc-200,
.dashboard-workspace .text-neutral-50,
.dashboard-workspace .text-neutral-100,
.dashboard-workspace .text-gray-50,
.dashboard-workspace .text-gray-100 {
  color: var(--yw-dashboard-text) !important;
}

.dashboard-workspace .text-zinc-300,
.dashboard-workspace .text-zinc-400,
.dashboard-workspace .text-zinc-500,
.dashboard-workspace .text-zinc-600,
.dashboard-workspace .text-zinc-700,
.dashboard-workspace .text-neutral-300,
.dashboard-workspace .text-neutral-400,
.dashboard-workspace .text-neutral-500,
.dashboard-workspace .text-gray-300,
.dashboard-workspace .text-gray-400,
.dashboard-workspace .text-gray-500,
.dashboard-workspace .placeholder\:text-zinc-400::placeholder,
.dashboard-workspace .placeholder\:text-zinc-500::placeholder {
  color: var(--yw-dashboard-muted) !important;
}

.dashboard-workspace input,
.dashboard-workspace textarea,
.dashboard-workspace select {
  background-color: var(--yw-dashboard-surface-alt) !important;
  border-color: var(--yw-dashboard-border) !important;
  color: var(--yw-dashboard-text) !important;
}

.dashboard-workspace option {
  background-color: var(--yw-dashboard-surface) !important;
  color: var(--yw-dashboard-text) !important;
}

.dashboard-workspace .site-button-primary,
.dashboard-workspace .bg-white.text-black,
.dashboard-workspace button.bg-white,
.dashboard-workspace a.bg-white {
  background-color: var(--yw-button-primary-bg) !important;
  color: var(--yw-button-primary-text) !important;
  border-color: var(--yw-button-primary-bg) !important;
}

.dashboard-workspace .bg-gradient-to-br,
.dashboard-workspace .bg-gradient-to-r,
.dashboard-workspace .bg-gradient-to-b {
  background-image: none !important;
  background-color: var(--yw-dashboard-surface) !important;
}

.dashboard-workspace .bg-gradient-to-t {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--yw-dashboard-surface) 92%, transparent),
    transparent
  ) !important;
  background-color: transparent !important;
}

.dashboard-workspace .from-zinc-900,
.dashboard-workspace .from-zinc-950,
.dashboard-workspace .via-zinc-900,
.dashboard-workspace .via-zinc-950,
.dashboard-workspace .to-zinc-900,
.dashboard-workspace .to-zinc-950 {
  --tw-gradient-from: var(--yw-dashboard-surface) !important;
  --tw-gradient-via: var(--yw-dashboard-surface) !important;
  --tw-gradient-to: var(--yw-dashboard-surface-alt) !important;
}

.dashboard-workspace .shadow-black\/20,
.dashboard-workspace .shadow-black\/30,
.dashboard-workspace .shadow-black\/40,
.dashboard-workspace .shadow-black\/50 {
  --tw-shadow-color: rgb(15 23 42 / 0.12) !important;
}

.dashboard-workspace .writer-editor-dark,
.dashboard-route .writer-editor-dark,
.dashboard-workspace .writer-editor-light,
.dashboard-route .writer-editor-light,
.dashboard-workspace .writer-editor-sepia,
.dashboard-route .writer-editor-sepia {
  --writer-editor-bg: var(--yw-editor-page) !important;
  --writer-editor-fg: var(--yw-editor-text) !important;
  --writer-editor-muted: var(--yw-editor-muted) !important;
  border-color: var(--yw-editor-border) !important;
  background-color: var(--yw-editor-toolbar) !important;
  color: var(--yw-editor-text) !important;
}

.dashboard-workspace .tiptap {
  background: var(--yw-editor-page) !important;
  color: var(--yw-editor-text) !important;
}

.dashboard-workspace .editor-panel,
.dashboard-workspace .editor-panel-soft,
.dashboard-workspace .professional-work-details-modal {
  background: var(--yw-dashboard-surface) !important;
  color: var(--yw-dashboard-text) !important;
  border-color: var(--yw-dashboard-border) !important;
}

/* Expanded theme tokens from Admin -> Theme settings. */
.dashboard-workspace {
  --site-background: var(--yw-dashboard-bg);
  --site-foreground: var(--yw-dashboard-text);
  --site-muted-foreground: var(--yw-dashboard-muted);
  --site-surface: var(--yw-card-bg);
  --site-surface-fg: var(--yw-card-text);
  --site-surface-muted: var(--yw-card-muted);
  --site-surface-alt: var(--yw-card-bg-alt);
  --site-surface-alt-fg: var(--yw-card-text);
  --site-surface-alt-muted: var(--yw-card-muted);
  --site-border: var(--yw-card-border);
}

.dashboard-workspace .site-surface,
.dashboard-workspace .bg-site-surface,
.dashboard-workspace .bg-white:not(button):not(a),
.dashboard-workspace .bg-zinc-50:not(button):not(a),
.dashboard-workspace .bg-gray-50:not(button):not(a) {
  background-color: var(--yw-card-bg) !important;
  color: var(--yw-card-text) !important;
  border-color: var(--yw-card-border) !important;
}

.dashboard-workspace .site-surface-alt,
.dashboard-workspace .bg-site-surface-alt,
.dashboard-workspace .bg-zinc-100:not(button):not(a),
.dashboard-workspace .bg-gray-100:not(button):not(a) {
  background-color: var(--yw-card-bg-alt) !important;
  color: var(--yw-card-text) !important;
  border-color: var(--yw-card-border) !important;
}

.dashboard-workspace .border-zinc-200,
.dashboard-workspace .border-gray-200,
.dashboard-workspace .border-slate-200 {
  border-color: var(--yw-card-border) !important;
}

.dashboard-workspace .text-zinc-900,
.dashboard-workspace .text-zinc-950,
.dashboard-workspace .text-gray-900,
.dashboard-workspace .text-slate-900 {
  color: var(--yw-card-text) !important;
}

.dashboard-workspace .text-zinc-500,
.dashboard-workspace .text-zinc-600,
.dashboard-workspace .text-gray-500,
.dashboard-workspace .text-gray-600,
.dashboard-workspace .text-slate-500,
.dashboard-workspace .text-slate-600 {
  color: var(--yw-card-muted) !important;
}

.dashboard-workspace input,
.dashboard-workspace textarea,
.dashboard-workspace select,
.dashboard-workspace [contenteditable="true"] {
  background-color: var(--yw-form-input-bg) !important;
  border-color: var(--yw-form-border) !important;
  color: var(--yw-form-input-text) !important;
}

.dashboard-workspace input::placeholder,
.dashboard-workspace textarea::placeholder,
.dashboard-workspace [contenteditable="true"]::before {
  color: var(--yw-form-placeholder) !important;
}

.dashboard-workspace input:focus,
.dashboard-workspace textarea:focus,
.dashboard-workspace select:focus,
.dashboard-workspace [contenteditable="true"]:focus {
  border-color: var(--yw-form-focus-border) !important;
  outline-color: var(--yw-form-focus-border) !important;
}

.dashboard-workspace label,
.dashboard-workspace .form-label {
  color: var(--yw-form-label) !important;
}

.dashboard-workspace .site-button-primary,
.dashboard-workspace button.bg-zinc-950,
.dashboard-workspace a.bg-zinc-950,
.dashboard-workspace button.bg-black,
.dashboard-workspace a.bg-black {
  background-color: var(--yw-button-primary-bg) !important;
  color: var(--yw-button-primary-text) !important;
  border-color: var(--yw-button-primary-bg) !important;
}

.dashboard-workspace .site-button-primary:hover,
.dashboard-workspace button.bg-zinc-950:hover,
.dashboard-workspace a.bg-zinc-950:hover,
.dashboard-workspace button.bg-black:hover,
.dashboard-workspace a.bg-black:hover {
  background-color: var(--yw-button-primary-hover) !important;
  border-color: var(--yw-button-primary-hover) !important;
}

.dashboard-workspace button:disabled,
.dashboard-workspace a[aria-disabled="true"] {
  background-color: var(--yw-button-disabled-bg) !important;
  color: var(--yw-button-disabled-text) !important;
  border-color: var(--yw-button-disabled-bg) !important;
}

.messages-workspace {
  background: var(--yw-message-bg) !important;
  color: var(--yw-message-text) !important;
  --yw-dashboard-bg: var(--yw-message-bg);
  --yw-dashboard-surface: var(--yw-message-sidebar);
  --yw-dashboard-surface-alt: var(--yw-message-active-dialog);
  --yw-dashboard-text: var(--yw-message-text);
  --yw-dashboard-muted: var(--yw-message-muted);
  --yw-dashboard-border: var(--yw-message-border);
  --yw-dashboard-accent: var(--yw-message-accent);
}

.messages-workspace .bg-site-background {
  background-color: var(--yw-message-bg) !important;
}

.messages-workspace .tiptap,
.messages-workspace [contenteditable="true"] {
  background: var(--yw-message-composer) !important;
  color: var(--yw-message-text) !important;
}

.messages-workspace .writer-editor-dark,
.messages-workspace .writer-editor-light,
.messages-workspace .writer-editor-sepia {
  background-color: var(--yw-message-toolbar) !important;
  color: var(--yw-message-text) !important;
  border-color: var(--yw-message-border) !important;
}

.messages-workspace .border-zinc-800,
.messages-workspace .border-zinc-700,
.messages-workspace .border-zinc-200,
.messages-workspace .border-gray-200 {
  border-color: var(--yw-message-border) !important;
}

.messages-workspace .bg-zinc-900,
.messages-workspace .bg-zinc-950,
.messages-workspace .bg-white:not(button):not(a) {
  background-color: var(--yw-message-sidebar) !important;
  color: var(--yw-message-text) !important;
}

.messages-workspace .bg-zinc-800,
.messages-workspace .bg-black,
.messages-workspace .bg-zinc-100:not(button):not(a),
.messages-workspace .bg-zinc-50:not(button):not(a) {
  background-color: var(--yw-message-active-dialog) !important;
  color: var(--yw-message-text) !important;
}

.messages-workspace input,
.messages-workspace textarea,
.messages-workspace select {
  background-color: var(--yw-message-composer) !important;
  border-color: var(--yw-message-border) !important;
  color: var(--yw-message-text) !important;
}

.writer-editor-route {
  --writer-editor-bg: var(--yw-editor-page);
  --writer-editor-fg: var(--yw-editor-text);
  --writer-editor-muted: var(--yw-editor-muted);
  caret-color: var(--yw-editor-cursor);
}

.writer-editor-route ::selection,
.dashboard-workspace .tiptap ::selection {
  background: var(--yw-editor-selection);
}

/* Deep dashboard theme controls: concrete buttons, work cards and status chips. */
.dashboard-workspace a[href$="/dashboard/profile"] {
  background-color: var(--yw-dashboard-action-profile-bg) !important;
  color: var(--yw-dashboard-action-profile-text) !important;
  border-color: var(--yw-dashboard-action-profile-border) !important;
}

.dashboard-workspace a[href$="/dashboard/create-work"] {
  background-color: var(--yw-dashboard-action-create-bg) !important;
  color: var(--yw-dashboard-action-create-text) !important;
  border-color: var(--yw-dashboard-action-create-border) !important;
}

.dashboard-workspace a[href$="/dashboard/messages"] {
  background-color: var(--yw-dashboard-action-messages-bg) !important;
  color: var(--yw-dashboard-action-messages-text) !important;
  border-color: var(--yw-dashboard-action-messages-border) !important;
}

.dashboard-workspace a[href$="/dashboard/notifications"] {
  background-color: var(--yw-dashboard-action-notifications-bg) !important;
  color: var(--yw-dashboard-action-notifications-text) !important;
  border-color: var(--yw-dashboard-action-notifications-border) !important;
}

.dashboard-workspace a[href$="/dashboard/notification-settings"] {
  background-color: var(--yw-dashboard-action-settings-bg) !important;
  color: var(--yw-dashboard-action-settings-text) !important;
  border-color: var(--yw-dashboard-action-settings-border) !important;
}

.dashboard-workspace a[href$="/library"] {
  background-color: var(--yw-dashboard-action-media-bg) !important;
  color: var(--yw-dashboard-action-media-text) !important;
  border-color: var(--yw-dashboard-action-media-border) !important;
}

.dashboard-workspace a[href$="/reading-library"] {
  background-color: var(--yw-dashboard-action-reading-bg) !important;
  color: var(--yw-dashboard-action-reading-text) !important;
  border-color: var(--yw-dashboard-action-reading-border) !important;
}

.dashboard-workspace a[href$="/dashboard/subscriptions"] {
  background-color: var(--yw-dashboard-action-subscriptions-bg) !important;
  color: var(--yw-dashboard-action-subscriptions-text) !important;
  border-color: var(--yw-dashboard-action-subscriptions-border) !important;
}

.dashboard-workspace a[href^="/authors/"],
.dashboard-workspace a[href*="/authors/"] {
  background-color: var(--yw-dashboard-action-public-profile-bg) !important;
  color: var(--yw-dashboard-action-public-profile-text) !important;
  border-color: var(--yw-dashboard-action-public-profile-border) !important;
}

.dashboard-workspace a[href$="/dashboard/trash"] {
  background-color: var(--yw-dashboard-action-trash-bg) !important;
  color: var(--yw-dashboard-action-trash-text) !important;
  border-color: var(--yw-dashboard-action-trash-border) !important;
}

.dashboard-workspace article {
  background-color: var(--yw-dashboard-work-card-bg) !important;
  color: var(--yw-dashboard-work-card-text) !important;
  border-color: var(--yw-dashboard-work-card-border) !important;
}

.dashboard-workspace article:hover {
  background-color: var(--yw-dashboard-work-card-hover-bg) !important;
}

.dashboard-workspace article p,
.dashboard-workspace article .text-sm,
.dashboard-workspace article .text-xs {
  color: inherit;
}

.dashboard-workspace article .text-zinc-300,
.dashboard-workspace article .text-zinc-400,
.dashboard-workspace article .text-zinc-500,
.dashboard-workspace article .text-zinc-600,
.dashboard-workspace article .text-gray-500,
.dashboard-workspace article .text-slate-500 {
  color: var(--yw-dashboard-work-card-muted) !important;
}

.dashboard-workspace article > div:first-child:not(:has(img)),
.dashboard-workspace article .bg-site-surface-alt {
  background-color: var(--yw-dashboard-work-cover-bg) !important;
}

.dashboard-workspace article [style*="--site-surface-alt"],
.dashboard-workspace article .rounded-2xl.border,
.dashboard-workspace article .rounded-xl.border {
  border-color: var(--yw-dashboard-work-card-border) !important;
}

.dashboard-workspace article .rounded-2xl.border:not(a):not(button),
.dashboard-workspace article .rounded-xl.border:not(a):not(button) {
  background-color: var(--yw-dashboard-work-meta-bg) !important;
  color: var(--yw-dashboard-work-meta-text) !important;
}

.dashboard-workspace article a[href*="catalog?genre="],
.dashboard-workspace article button[title*="genre"],
.dashboard-workspace article button[aria-label*="genre"] {
  background-color: var(--yw-dashboard-work-genre-bg) !important;
  color: var(--yw-dashboard-work-genre-text) !important;
  border-color: var(--yw-dashboard-work-genre-border) !important;
}

.dashboard-workspace article .border-emerald-800,
.dashboard-workspace article .text-emerald-200,
.dashboard-workspace article .bg-emerald-950\/40 {
  background-color: var(--yw-dashboard-work-status-published-bg) !important;
  color: var(--yw-dashboard-work-status-published-text) !important;
  border-color: var(--yw-dashboard-work-status-published-border) !important;
}

.dashboard-workspace article .border-amber-800,
.dashboard-workspace article .text-amber-200,
.dashboard-workspace article .bg-amber-950\/40,
.dashboard-workspace article .border-orange-800,
.dashboard-workspace article .text-orange-200,
.dashboard-workspace article .bg-orange-950\/40 {
  background-color: var(--yw-dashboard-work-status-review-bg) !important;
  color: var(--yw-dashboard-work-status-review-text) !important;
  border-color: var(--yw-dashboard-work-status-review-border) !important;
}

.dashboard-workspace article .border-zinc-800.bg-zinc-950\/60,
.dashboard-workspace article .bg-zinc-950\/60.text-zinc-100 {
  background-color: var(--yw-dashboard-work-status-draft-bg) !important;
  color: var(--yw-dashboard-work-status-draft-text) !important;
  border-color: var(--yw-dashboard-work-status-draft-border) !important;
}

.dashboard-workspace
  article
  a[href^="/dashboard/works/"]:not(:has(img)):not(
    .dashboard-work-title-link
  ):not(.dashboard-work-cover) {
  background-color: var(--yw-dashboard-work-open-draft-bg) !important;
  color: var(--yw-dashboard-work-open-draft-text) !important;
  border-color: var(--yw-dashboard-work-open-draft-border) !important;
}

.dashboard-workspace .dashboard-work-title-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--yw-dashboard-work-card-text) !important;
}

.dashboard-workspace .dashboard-work-cover {
  background-color: var(--yw-dashboard-work-cover-bg) !important;
  color: var(--yw-dashboard-work-card-muted) !important;
  border-color: var(--yw-dashboard-work-card-border) !important;
}

.dashboard-workspace article a[href^="/works/"] {
  background-color: var(--yw-dashboard-work-open-public-bg) !important;
  color: var(--yw-dashboard-work-open-public-text) !important;
  border-color: var(--yw-dashboard-work-open-public-border) !important;
}

/* Direct dashboard theme hooks. These classes are used by the real dashboard
   markup and do not depend on brittle href selectors or old Tailwind colors. */
.dashboard-workspace .dashboard-action-profile {
  background-color: var(--yw-dashboard-action-profile-bg) !important;
  color: var(--yw-dashboard-action-profile-text) !important;
  border-color: var(--yw-dashboard-action-profile-border) !important;
}

.dashboard-workspace .dashboard-action-create {
  background-color: var(--yw-dashboard-action-create-bg) !important;
  color: var(--yw-dashboard-action-create-text) !important;
  border-color: var(--yw-dashboard-action-create-border) !important;
}

.dashboard-workspace .dashboard-action-messages {
  background-color: var(--yw-dashboard-action-messages-bg) !important;
  color: var(--yw-dashboard-action-messages-text) !important;
  border-color: var(--yw-dashboard-action-messages-border) !important;
}

.dashboard-workspace .dashboard-action-notifications {
  background-color: var(--yw-dashboard-action-notifications-bg) !important;
  color: var(--yw-dashboard-action-notifications-text) !important;
  border-color: var(--yw-dashboard-action-notifications-border) !important;
}

.dashboard-workspace .dashboard-action-settings {
  background-color: var(--yw-dashboard-action-settings-bg) !important;
  color: var(--yw-dashboard-action-settings-text) !important;
  border-color: var(--yw-dashboard-action-settings-border) !important;
}

.dashboard-workspace .dashboard-action-media {
  background-color: var(--yw-dashboard-action-media-bg) !important;
  color: var(--yw-dashboard-action-media-text) !important;
  border-color: var(--yw-dashboard-action-media-border) !important;
}

.dashboard-workspace .dashboard-action-reading {
  background-color: var(--yw-dashboard-action-reading-bg) !important;
  color: var(--yw-dashboard-action-reading-text) !important;
  border-color: var(--yw-dashboard-action-reading-border) !important;
}

.dashboard-workspace .dashboard-action-subscriptions {
  background-color: var(--yw-dashboard-action-subscriptions-bg) !important;
  color: var(--yw-dashboard-action-subscriptions-text) !important;
  border-color: var(--yw-dashboard-action-subscriptions-border) !important;
}

.dashboard-workspace .dashboard-action-beta {
  background-color: color-mix(
    in srgb,
    var(--yw-state-beta) 12%,
    var(--yw-dashboard-surface)
  ) !important;
  color: var(--yw-state-beta) !important;
  border-color: var(--yw-state-beta) !important;
}

.dashboard-workspace .dashboard-work-card {
  background-color: var(--yw-dashboard-work-card-bg) !important;
  color: var(--yw-dashboard-work-card-text) !important;
  border-color: var(--yw-dashboard-work-card-border) !important;
}

.dashboard-workspace .dashboard-work-card:hover {
  background-color: var(--yw-dashboard-work-card-hover-bg) !important;
}

.dashboard-workspace .dashboard-work-genre-chip {
  background-color: var(--yw-dashboard-work-genre-bg) !important;
  color: var(--yw-dashboard-work-genre-text) !important;
  border-color: var(--yw-dashboard-work-genre-border) !important;
}

.dashboard-workspace .dashboard-work-genre-more {
  background-color: var(--yw-dashboard-work-genre-more-bg) !important;
  color: var(--yw-dashboard-work-genre-more-text) !important;
  border-color: var(--yw-dashboard-work-genre-more-border) !important;
}

.dashboard-workspace .dashboard-work-status-published {
  background-color: var(--yw-dashboard-work-status-published-bg) !important;
  color: var(--yw-dashboard-work-status-published-text) !important;
  border-color: var(--yw-dashboard-work-status-published-border) !important;
}

.dashboard-workspace .dashboard-work-status-draft {
  background-color: var(--yw-dashboard-work-status-draft-bg) !important;
  color: var(--yw-dashboard-work-status-draft-text) !important;
  border-color: var(--yw-dashboard-work-status-draft-border) !important;
}

.dashboard-workspace .dashboard-work-status-review {
  background-color: var(--yw-dashboard-work-status-review-bg) !important;
  color: var(--yw-dashboard-work-status-review-text) !important;
  border-color: var(--yw-dashboard-work-status-review-border) !important;
}

.dashboard-workspace .dashboard-work-open-draft {
  background-color: var(--yw-dashboard-work-open-draft-bg) !important;
  color: var(--yw-dashboard-work-open-draft-text) !important;
  border-color: var(--yw-dashboard-work-open-draft-border) !important;
}

.dashboard-workspace .dashboard-work-open-public {
  background-color: var(--yw-dashboard-work-open-public-bg) !important;
  color: var(--yw-dashboard-work-open-public-text) !important;
  border-color: var(--yw-dashboard-work-open-public-border) !important;
}

/* Route-specific theme layers. These map the expanded Admin -> Theme settings
   sections to real pages without rewriting every old Tailwind class. */
body.reading-library-route {
  --yw-route-bg: var(--yw-reading-library-bg);
  --yw-route-hero: var(--yw-reading-library-hero);
  --yw-route-surface: var(--yw-reading-library-surface);
  --yw-route-surface-alt: var(--yw-reading-library-surface-alt);
  --yw-route-text: var(--yw-reading-library-text);
  --yw-route-muted: var(--yw-reading-library-muted);
  --yw-route-border: var(--yw-reading-library-border);
  --yw-route-accent: var(--yw-reading-library-accent);
  --yw-route-icon: var(--yw-reading-library-icon);
  --yw-route-card-bg: var(--yw-reading-library-card-bg);
  --yw-route-card-text: var(--yw-reading-library-card-text);
  --yw-route-card-muted: var(--yw-reading-library-card-muted);
  --yw-route-card-border: var(--yw-reading-library-card-border);
  --yw-route-label-bg: var(--yw-reading-library-label-bg);
  --yw-route-label-text: var(--yw-reading-library-label-text);
  --yw-route-input-bg: var(--yw-reading-library-input-bg);
  --yw-route-input-text: var(--yw-reading-library-input-text);
  --yw-route-input-placeholder: var(--yw-reading-library-input-placeholder);
  --yw-route-input-border: var(--yw-reading-library-input-border);
  --yw-route-button-bg: var(--yw-reading-library-button-bg);
  --yw-route-button-text: var(--yw-reading-library-button-text);
  --yw-route-button-border: var(--yw-reading-library-button-border);
  --yw-route-button-hover: var(--yw-reading-library-button-hover);
  --yw-route-secondary-button-bg: var(--yw-reading-library-secondary-button-bg);
  --yw-route-secondary-button-text: var(
    --yw-reading-library-secondary-button-text
  );
  --yw-route-secondary-button-border: var(
    --yw-reading-library-secondary-button-border
  );
  --yw-route-danger-button-bg: var(--yw-reading-library-danger-button-bg);
  --yw-route-danger-button-text: var(--yw-reading-library-danger-button-text);
  --yw-route-danger-button-border: var(
    --yw-reading-library-danger-button-border
  );
  --yw-route-stat-bg: var(--yw-reading-library-stat-bg);
  --yw-route-stat-text: var(--yw-reading-library-stat-text);
  --yw-route-row-bg: var(--yw-reading-library-row-bg);
  --yw-route-row-text: var(--yw-reading-library-row-text);
  --yw-route-empty-bg: var(--yw-reading-library-empty-bg);
  --yw-route-empty-text: var(--yw-reading-library-empty-text);
  --yw-route-image-bg: var(--yw-reading-library-image-bg);
  --yw-route-cover-overlay: var(--yw-reading-library-cover-overlay);
  --yw-route-toolbar-bg: var(--yw-reading-library-toolbar-bg);
  --yw-route-toolbar-button-bg: var(--yw-reading-library-toolbar-button-bg);
  --yw-route-toolbar-button-text: var(--yw-reading-library-toolbar-button-text);
  --yw-route-filter-active-bg: var(--yw-reading-library-filter-active-bg);
  --yw-route-filter-active-text: var(--yw-reading-library-filter-active-text);
  --yw-route-filter-idle-bg: var(--yw-reading-library-filter-idle-bg);
  --yw-route-filter-idle-text: var(--yw-reading-library-filter-idle-text);
  --yw-route-filter-border: var(--yw-reading-library-filter-border);
  --yw-route-unread-bg: var(--yw-reading-library-unread-bg);
  --yw-route-unread-text: var(--yw-reading-library-unread-text);
  --yw-route-selected-bg: var(--yw-reading-library-selected-bg);
  --yw-route-selected-text: var(--yw-reading-library-selected-text);
  --yw-route-warning-border: var(--yw-reading-library-warning-border);
  --yw-route-warning-text: var(--yw-reading-library-warning-text);
  --yw-route-on-bg: var(--yw-reading-library-on-bg);
  --yw-route-on-text: var(--yw-reading-library-on-text);
  --yw-route-off-bg: var(--yw-reading-library-off-bg);
  --yw-route-off-text: var(--yw-reading-library-off-text);
  --yw-route-social-icon-bg: var(--yw-reading-library-social-icon-bg);
  --yw-route-social-icon-text: var(--yw-reading-library-social-icon-text);
  --yw-route-progress-bg: var(--yw-reading-library-progress-bg);
  --yw-route-progress-fill: var(--yw-reading-library-progress-fill);
  --yw-route-nav-bg: var(--yw-reading-library-nav-bg);
  --yw-route-nav-text: var(--yw-reading-library-nav-text);
  --yw-route-publish-bg: var(--yw-reading-library-publish-bg);
  --yw-route-publish-text: var(--yw-reading-library-publish-text);
  --yw-route-danger-bg: var(--yw-reading-library-danger-bg);
  --yw-route-danger-text: var(--yw-reading-library-danger-text);
  --yw-route-tab-active-bg: var(--yw-reading-library-tab-active-bg);
  --yw-route-tab-active-text: var(--yw-reading-library-tab-active-text);
  --yw-route-tab-idle-bg: var(--yw-reading-library-tab-idle-bg);
  --yw-route-tab-idle-text: var(--yw-reading-library-tab-idle-text);
  --yw-route-error-bg: var(--yw-reading-library-error-bg);
  --yw-route-success-bg: var(--yw-reading-library-success-bg);
  --yw-route-success-text: var(--yw-reading-library-success-text);
  --yw-route-incoming-text: var(--yw-reading-library-incoming-text);
  --yw-route-outgoing-text: var(--yw-reading-library-outgoing-text);
  --yw-route-divider: var(--yw-reading-library-divider);
}

body.subscriptions-route {
  --yw-route-bg: var(--yw-subscriptions-bg);
  --yw-route-hero: var(--yw-subscriptions-hero);
  --yw-route-surface: var(--yw-subscriptions-surface);
  --yw-route-surface-alt: var(--yw-subscriptions-surface-alt);
  --yw-route-text: var(--yw-subscriptions-text);
  --yw-route-muted: var(--yw-subscriptions-muted);
  --yw-route-border: var(--yw-subscriptions-border);
  --yw-route-accent: var(--yw-subscriptions-accent);
  --yw-route-icon: var(--yw-subscriptions-icon);
  --yw-route-card-bg: var(--yw-subscriptions-card-bg);
  --yw-route-card-text: var(--yw-subscriptions-card-text);
  --yw-route-card-muted: var(--yw-subscriptions-card-muted);
  --yw-route-card-border: var(--yw-subscriptions-card-border);
  --yw-route-label-bg: var(--yw-subscriptions-label-bg);
  --yw-route-label-text: var(--yw-subscriptions-label-text);
  --yw-route-input-bg: var(--yw-subscriptions-input-bg);
  --yw-route-input-text: var(--yw-subscriptions-input-text);
  --yw-route-input-placeholder: var(--yw-subscriptions-input-placeholder);
  --yw-route-input-border: var(--yw-subscriptions-input-border);
  --yw-route-button-bg: var(--yw-subscriptions-button-bg);
  --yw-route-button-text: var(--yw-subscriptions-button-text);
  --yw-route-button-border: var(--yw-subscriptions-button-border);
  --yw-route-button-hover: var(--yw-subscriptions-button-hover);
  --yw-route-secondary-button-bg: var(--yw-subscriptions-secondary-button-bg);
  --yw-route-secondary-button-text: var(
    --yw-subscriptions-secondary-button-text
  );
  --yw-route-secondary-button-border: var(
    --yw-subscriptions-secondary-button-border
  );
  --yw-route-danger-button-bg: var(--yw-subscriptions-danger-button-bg);
  --yw-route-danger-button-text: var(--yw-subscriptions-danger-button-text);
  --yw-route-danger-button-border: var(--yw-subscriptions-danger-button-border);
  --yw-route-stat-bg: var(--yw-subscriptions-stat-bg);
  --yw-route-stat-text: var(--yw-subscriptions-stat-text);
  --yw-route-row-bg: var(--yw-subscriptions-row-bg);
  --yw-route-row-text: var(--yw-subscriptions-row-text);
  --yw-route-empty-bg: var(--yw-subscriptions-empty-bg);
  --yw-route-empty-text: var(--yw-subscriptions-empty-text);
  --yw-route-image-bg: var(--yw-subscriptions-image-bg);
  --yw-route-cover-overlay: var(--yw-subscriptions-cover-overlay);
  --yw-route-toolbar-bg: var(--yw-subscriptions-toolbar-bg);
  --yw-route-toolbar-button-bg: var(--yw-subscriptions-toolbar-button-bg);
  --yw-route-toolbar-button-text: var(--yw-subscriptions-toolbar-button-text);
  --yw-route-filter-active-bg: var(--yw-subscriptions-filter-active-bg);
  --yw-route-filter-active-text: var(--yw-subscriptions-filter-active-text);
  --yw-route-filter-idle-bg: var(--yw-subscriptions-filter-idle-bg);
  --yw-route-filter-idle-text: var(--yw-subscriptions-filter-idle-text);
  --yw-route-filter-border: var(--yw-subscriptions-filter-border);
  --yw-route-unread-bg: var(--yw-subscriptions-unread-bg);
  --yw-route-unread-text: var(--yw-subscriptions-unread-text);
  --yw-route-selected-bg: var(--yw-subscriptions-selected-bg);
  --yw-route-selected-text: var(--yw-subscriptions-selected-text);
  --yw-route-warning-border: var(--yw-subscriptions-warning-border);
  --yw-route-warning-text: var(--yw-subscriptions-warning-text);
  --yw-route-on-bg: var(--yw-subscriptions-on-bg);
  --yw-route-on-text: var(--yw-subscriptions-on-text);
  --yw-route-off-bg: var(--yw-subscriptions-off-bg);
  --yw-route-off-text: var(--yw-subscriptions-off-text);
  --yw-route-social-icon-bg: var(--yw-subscriptions-social-icon-bg);
  --yw-route-social-icon-text: var(--yw-subscriptions-social-icon-text);
  --yw-route-progress-bg: var(--yw-subscriptions-progress-bg);
  --yw-route-progress-fill: var(--yw-subscriptions-progress-fill);
  --yw-route-nav-bg: var(--yw-subscriptions-nav-bg);
  --yw-route-nav-text: var(--yw-subscriptions-nav-text);
  --yw-route-publish-bg: var(--yw-subscriptions-publish-bg);
  --yw-route-publish-text: var(--yw-subscriptions-publish-text);
  --yw-route-danger-bg: var(--yw-subscriptions-danger-bg);
  --yw-route-danger-text: var(--yw-subscriptions-danger-text);
  --yw-route-tab-active-bg: var(--yw-subscriptions-tab-active-bg);
  --yw-route-tab-active-text: var(--yw-subscriptions-tab-active-text);
  --yw-route-tab-idle-bg: var(--yw-subscriptions-tab-idle-bg);
  --yw-route-tab-idle-text: var(--yw-subscriptions-tab-idle-text);
  --yw-route-error-bg: var(--yw-subscriptions-error-bg);
  --yw-route-success-bg: var(--yw-subscriptions-success-bg);
  --yw-route-success-text: var(--yw-subscriptions-success-text);
  --yw-route-incoming-text: var(--yw-subscriptions-incoming-text);
  --yw-route-outgoing-text: var(--yw-subscriptions-outgoing-text);
  --yw-route-divider: var(--yw-subscriptions-divider);
}

body.notifications-route {
  --yw-route-bg: var(--yw-notifications-bg);
  --yw-route-hero: var(--yw-notifications-hero);
  --yw-route-surface: var(--yw-notifications-surface);
  --yw-route-surface-alt: var(--yw-notifications-surface-alt);
  --yw-route-text: var(--yw-notifications-text);
  --yw-route-muted: var(--yw-notifications-muted);
  --yw-route-border: var(--yw-notifications-border);
  --yw-route-accent: var(--yw-notifications-accent);
  --yw-route-icon: var(--yw-notifications-icon);
  --yw-route-card-bg: var(--yw-notifications-card-bg);
  --yw-route-card-text: var(--yw-notifications-card-text);
  --yw-route-card-muted: var(--yw-notifications-card-muted);
  --yw-route-card-border: var(--yw-notifications-card-border);
  --yw-route-label-bg: var(--yw-notifications-label-bg);
  --yw-route-label-text: var(--yw-notifications-label-text);
  --yw-route-input-bg: var(--yw-notifications-input-bg);
  --yw-route-input-text: var(--yw-notifications-input-text);
  --yw-route-input-placeholder: var(--yw-notifications-input-placeholder);
  --yw-route-input-border: var(--yw-notifications-input-border);
  --yw-route-button-bg: var(--yw-notifications-button-bg);
  --yw-route-button-text: var(--yw-notifications-button-text);
  --yw-route-button-border: var(--yw-notifications-button-border);
  --yw-route-button-hover: var(--yw-notifications-button-hover);
  --yw-route-secondary-button-bg: var(--yw-notifications-secondary-button-bg);
  --yw-route-secondary-button-text: var(
    --yw-notifications-secondary-button-text
  );
  --yw-route-secondary-button-border: var(
    --yw-notifications-secondary-button-border
  );
  --yw-route-danger-button-bg: var(--yw-notifications-danger-button-bg);
  --yw-route-danger-button-text: var(--yw-notifications-danger-button-text);
  --yw-route-danger-button-border: var(--yw-notifications-danger-button-border);
  --yw-route-stat-bg: var(--yw-notifications-stat-bg);
  --yw-route-stat-text: var(--yw-notifications-stat-text);
  --yw-route-row-bg: var(--yw-notifications-row-bg);
  --yw-route-row-text: var(--yw-notifications-row-text);
  --yw-route-empty-bg: var(--yw-notifications-empty-bg);
  --yw-route-empty-text: var(--yw-notifications-empty-text);
  --yw-route-image-bg: var(--yw-notifications-image-bg);
  --yw-route-cover-overlay: var(--yw-notifications-cover-overlay);
  --yw-route-toolbar-bg: var(--yw-notifications-toolbar-bg);
  --yw-route-toolbar-button-bg: var(--yw-notifications-toolbar-button-bg);
  --yw-route-toolbar-button-text: var(--yw-notifications-toolbar-button-text);
  --yw-route-filter-active-bg: var(--yw-notifications-filter-active-bg);
  --yw-route-filter-active-text: var(--yw-notifications-filter-active-text);
  --yw-route-filter-idle-bg: var(--yw-notifications-filter-idle-bg);
  --yw-route-filter-idle-text: var(--yw-notifications-filter-idle-text);
  --yw-route-filter-border: var(--yw-notifications-filter-border);
  --yw-route-unread-bg: var(--yw-notifications-unread-bg);
  --yw-route-unread-text: var(--yw-notifications-unread-text);
  --yw-route-selected-bg: var(--yw-notifications-selected-bg);
  --yw-route-selected-text: var(--yw-notifications-selected-text);
  --yw-route-warning-border: var(--yw-notifications-warning-border);
  --yw-route-warning-text: var(--yw-notifications-warning-text);
  --yw-route-on-bg: var(--yw-notifications-on-bg);
  --yw-route-on-text: var(--yw-notifications-on-text);
  --yw-route-off-bg: var(--yw-notifications-off-bg);
  --yw-route-off-text: var(--yw-notifications-off-text);
  --yw-route-social-icon-bg: var(--yw-notifications-social-icon-bg);
  --yw-route-social-icon-text: var(--yw-notifications-social-icon-text);
  --yw-route-progress-bg: var(--yw-notifications-progress-bg);
  --yw-route-progress-fill: var(--yw-notifications-progress-fill);
  --yw-route-nav-bg: var(--yw-notifications-nav-bg);
  --yw-route-nav-text: var(--yw-notifications-nav-text);
  --yw-route-publish-bg: var(--yw-notifications-publish-bg);
  --yw-route-publish-text: var(--yw-notifications-publish-text);
  --yw-route-danger-bg: var(--yw-notifications-danger-bg);
  --yw-route-danger-text: var(--yw-notifications-danger-text);
  --yw-route-tab-active-bg: var(--yw-notifications-tab-active-bg);
  --yw-route-tab-active-text: var(--yw-notifications-tab-active-text);
  --yw-route-tab-idle-bg: var(--yw-notifications-tab-idle-bg);
  --yw-route-tab-idle-text: var(--yw-notifications-tab-idle-text);
  --yw-route-error-bg: var(--yw-notifications-error-bg);
  --yw-route-success-bg: var(--yw-notifications-success-bg);
  --yw-route-success-text: var(--yw-notifications-success-text);
  --yw-route-incoming-text: var(--yw-notifications-incoming-text);
  --yw-route-outgoing-text: var(--yw-notifications-outgoing-text);
  --yw-route-divider: var(--yw-notifications-divider);
}

body.notification-settings-route {
  --yw-route-bg: var(--yw-notification-settings-bg);
  --yw-route-hero: var(--yw-notification-settings-hero);
  --yw-route-surface: var(--yw-notification-settings-surface);
  --yw-route-surface-alt: var(--yw-notification-settings-surface-alt);
  --yw-route-text: var(--yw-notification-settings-text);
  --yw-route-muted: var(--yw-notification-settings-muted);
  --yw-route-border: var(--yw-notification-settings-border);
  --yw-route-accent: var(--yw-notification-settings-accent);
  --yw-route-icon: var(--yw-notification-settings-icon);
  --yw-route-card-bg: var(--yw-notification-settings-card-bg);
  --yw-route-card-text: var(--yw-notification-settings-card-text);
  --yw-route-card-muted: var(--yw-notification-settings-card-muted);
  --yw-route-card-border: var(--yw-notification-settings-card-border);
  --yw-route-label-bg: var(--yw-notification-settings-label-bg);
  --yw-route-label-text: var(--yw-notification-settings-label-text);
  --yw-route-input-bg: var(--yw-notification-settings-input-bg);
  --yw-route-input-text: var(--yw-notification-settings-input-text);
  --yw-route-input-placeholder: var(
    --yw-notification-settings-input-placeholder
  );
  --yw-route-input-border: var(--yw-notification-settings-input-border);
  --yw-route-button-bg: var(--yw-notification-settings-button-bg);
  --yw-route-button-text: var(--yw-notification-settings-button-text);
  --yw-route-button-border: var(--yw-notification-settings-button-border);
  --yw-route-button-hover: var(--yw-notification-settings-button-hover);
  --yw-route-secondary-button-bg: var(
    --yw-notification-settings-secondary-button-bg
  );
  --yw-route-secondary-button-text: var(
    --yw-notification-settings-secondary-button-text
  );
  --yw-route-secondary-button-border: var(
    --yw-notification-settings-secondary-button-border
  );
  --yw-route-danger-button-bg: var(--yw-notification-settings-danger-button-bg);
  --yw-route-danger-button-text: var(
    --yw-notification-settings-danger-button-text
  );
  --yw-route-danger-button-border: var(
    --yw-notification-settings-danger-button-border
  );
  --yw-route-stat-bg: var(--yw-notification-settings-stat-bg);
  --yw-route-stat-text: var(--yw-notification-settings-stat-text);
  --yw-route-row-bg: var(--yw-notification-settings-row-bg);
  --yw-route-row-text: var(--yw-notification-settings-row-text);
  --yw-route-empty-bg: var(--yw-notification-settings-empty-bg);
  --yw-route-empty-text: var(--yw-notification-settings-empty-text);
  --yw-route-image-bg: var(--yw-notification-settings-image-bg);
  --yw-route-cover-overlay: var(--yw-notification-settings-cover-overlay);
  --yw-route-toolbar-bg: var(--yw-notification-settings-toolbar-bg);
  --yw-route-toolbar-button-bg: var(
    --yw-notification-settings-toolbar-button-bg
  );
  --yw-route-toolbar-button-text: var(
    --yw-notification-settings-toolbar-button-text
  );
  --yw-route-filter-active-bg: var(--yw-notification-settings-filter-active-bg);
  --yw-route-filter-active-text: var(
    --yw-notification-settings-filter-active-text
  );
  --yw-route-filter-idle-bg: var(--yw-notification-settings-filter-idle-bg);
  --yw-route-filter-idle-text: var(--yw-notification-settings-filter-idle-text);
  --yw-route-filter-border: var(--yw-notification-settings-filter-border);
  --yw-route-unread-bg: var(--yw-notification-settings-unread-bg);
  --yw-route-unread-text: var(--yw-notification-settings-unread-text);
  --yw-route-selected-bg: var(--yw-notification-settings-selected-bg);
  --yw-route-selected-text: var(--yw-notification-settings-selected-text);
  --yw-route-warning-border: var(--yw-notification-settings-warning-border);
  --yw-route-warning-text: var(--yw-notification-settings-warning-text);
  --yw-route-on-bg: var(--yw-notification-settings-on-bg);
  --yw-route-on-text: var(--yw-notification-settings-on-text);
  --yw-route-off-bg: var(--yw-notification-settings-off-bg);
  --yw-route-off-text: var(--yw-notification-settings-off-text);
  --yw-route-social-icon-bg: var(--yw-notification-settings-social-icon-bg);
  --yw-route-social-icon-text: var(--yw-notification-settings-social-icon-text);
  --yw-route-progress-bg: var(--yw-notification-settings-progress-bg);
  --yw-route-progress-fill: var(--yw-notification-settings-progress-fill);
  --yw-route-nav-bg: var(--yw-notification-settings-nav-bg);
  --yw-route-nav-text: var(--yw-notification-settings-nav-text);
  --yw-route-publish-bg: var(--yw-notification-settings-publish-bg);
  --yw-route-publish-text: var(--yw-notification-settings-publish-text);
  --yw-route-danger-bg: var(--yw-notification-settings-danger-bg);
  --yw-route-danger-text: var(--yw-notification-settings-danger-text);
  --yw-route-tab-active-bg: var(--yw-notification-settings-tab-active-bg);
  --yw-route-tab-active-text: var(--yw-notification-settings-tab-active-text);
  --yw-route-tab-idle-bg: var(--yw-notification-settings-tab-idle-bg);
  --yw-route-tab-idle-text: var(--yw-notification-settings-tab-idle-text);
  --yw-route-error-bg: var(--yw-notification-settings-error-bg);
  --yw-route-success-bg: var(--yw-notification-settings-success-bg);
  --yw-route-success-text: var(--yw-notification-settings-success-text);
  --yw-route-incoming-text: var(--yw-notification-settings-incoming-text);
  --yw-route-outgoing-text: var(--yw-notification-settings-outgoing-text);
  --yw-route-divider: var(--yw-notification-settings-divider);
}

body.profile-route {
  --yw-route-bg: var(--yw-profile-bg);
  --yw-route-hero: var(--yw-profile-hero);
  --yw-route-surface: var(--yw-profile-surface);
  --yw-route-surface-alt: var(--yw-profile-surface-alt);
  --yw-route-text: var(--yw-profile-text);
  --yw-route-muted: var(--yw-profile-muted);
  --yw-route-border: var(--yw-profile-border);
  --yw-route-accent: var(--yw-profile-accent);
  --yw-route-icon: var(--yw-profile-icon);
  --yw-route-card-bg: var(--yw-profile-card-bg);
  --yw-route-card-text: var(--yw-profile-card-text);
  --yw-route-card-muted: var(--yw-profile-card-muted);
  --yw-route-card-border: var(--yw-profile-card-border);
  --yw-route-label-bg: var(--yw-profile-label-bg);
  --yw-route-label-text: var(--yw-profile-label-text);
  --yw-route-input-bg: var(--yw-profile-input-bg);
  --yw-route-input-text: var(--yw-profile-input-text);
  --yw-route-input-placeholder: var(--yw-profile-input-placeholder);
  --yw-route-input-border: var(--yw-profile-input-border);
  --yw-route-button-bg: var(--yw-profile-button-bg);
  --yw-route-button-text: var(--yw-profile-button-text);
  --yw-route-button-border: var(--yw-profile-button-border);
  --yw-route-button-hover: var(--yw-profile-button-hover);
  --yw-route-secondary-button-bg: var(--yw-profile-secondary-button-bg);
  --yw-route-secondary-button-text: var(--yw-profile-secondary-button-text);
  --yw-route-secondary-button-border: var(--yw-profile-secondary-button-border);
  --yw-route-danger-button-bg: var(--yw-profile-danger-button-bg);
  --yw-route-danger-button-text: var(--yw-profile-danger-button-text);
  --yw-route-danger-button-border: var(--yw-profile-danger-button-border);
  --yw-route-stat-bg: var(--yw-profile-stat-bg);
  --yw-route-stat-text: var(--yw-profile-stat-text);
  --yw-route-row-bg: var(--yw-profile-row-bg);
  --yw-route-row-text: var(--yw-profile-row-text);
  --yw-route-empty-bg: var(--yw-profile-empty-bg);
  --yw-route-empty-text: var(--yw-profile-empty-text);
  --yw-route-image-bg: var(--yw-profile-image-bg);
  --yw-route-cover-overlay: var(--yw-profile-cover-overlay);
  --yw-route-toolbar-bg: var(--yw-profile-toolbar-bg);
  --yw-route-toolbar-button-bg: var(--yw-profile-toolbar-button-bg);
  --yw-route-toolbar-button-text: var(--yw-profile-toolbar-button-text);
  --yw-route-filter-active-bg: var(--yw-profile-filter-active-bg);
  --yw-route-filter-active-text: var(--yw-profile-filter-active-text);
  --yw-route-filter-idle-bg: var(--yw-profile-filter-idle-bg);
  --yw-route-filter-idle-text: var(--yw-profile-filter-idle-text);
  --yw-route-filter-border: var(--yw-profile-filter-border);
  --yw-route-unread-bg: var(--yw-profile-unread-bg);
  --yw-route-unread-text: var(--yw-profile-unread-text);
  --yw-route-selected-bg: var(--yw-profile-selected-bg);
  --yw-route-selected-text: var(--yw-profile-selected-text);
  --yw-route-warning-border: var(--yw-profile-warning-border);
  --yw-route-warning-text: var(--yw-profile-warning-text);
  --yw-route-on-bg: var(--yw-profile-on-bg);
  --yw-route-on-text: var(--yw-profile-on-text);
  --yw-route-off-bg: var(--yw-profile-off-bg);
  --yw-route-off-text: var(--yw-profile-off-text);
  --yw-route-social-icon-bg: var(--yw-profile-social-icon-bg);
  --yw-route-social-icon-text: var(--yw-profile-social-icon-text);
  --yw-route-progress-bg: var(--yw-profile-progress-bg);
  --yw-route-progress-fill: var(--yw-profile-progress-fill);
  --yw-route-nav-bg: var(--yw-profile-nav-bg);
  --yw-route-nav-text: var(--yw-profile-nav-text);
  --yw-route-publish-bg: var(--yw-profile-publish-bg);
  --yw-route-publish-text: var(--yw-profile-publish-text);
  --yw-route-danger-bg: var(--yw-profile-danger-bg);
  --yw-route-danger-text: var(--yw-profile-danger-text);
  --yw-route-tab-active-bg: var(--yw-profile-tab-active-bg);
  --yw-route-tab-active-text: var(--yw-profile-tab-active-text);
  --yw-route-tab-idle-bg: var(--yw-profile-tab-idle-bg);
  --yw-route-tab-idle-text: var(--yw-profile-tab-idle-text);
  --yw-route-error-bg: var(--yw-profile-error-bg);
  --yw-route-success-bg: var(--yw-profile-success-bg);
  --yw-route-success-text: var(--yw-profile-success-text);
  --yw-route-incoming-text: var(--yw-profile-incoming-text);
  --yw-route-outgoing-text: var(--yw-profile-outgoing-text);
  --yw-route-divider: var(--yw-profile-divider);
}

body.create-work-route {
  --yw-route-bg: var(--yw-create-work-bg);
  --yw-route-hero: var(--yw-create-work-hero);
  --yw-route-surface: var(--yw-create-work-surface);
  --yw-route-surface-alt: var(--yw-create-work-surface-alt);
  --yw-route-text: var(--yw-create-work-text);
  --yw-route-muted: var(--yw-create-work-muted);
  --yw-route-border: var(--yw-create-work-border);
  --yw-route-accent: var(--yw-create-work-accent);
  --yw-route-icon: var(--yw-create-work-icon);
  --yw-route-card-bg: var(--yw-create-work-card-bg);
  --yw-route-card-text: var(--yw-create-work-card-text);
  --yw-route-card-muted: var(--yw-create-work-card-muted);
  --yw-route-card-border: var(--yw-create-work-card-border);
  --yw-route-label-bg: var(--yw-create-work-label-bg);
  --yw-route-label-text: var(--yw-create-work-label-text);
  --yw-route-input-bg: var(--yw-create-work-input-bg);
  --yw-route-input-text: var(--yw-create-work-input-text);
  --yw-route-input-placeholder: var(--yw-create-work-input-placeholder);
  --yw-route-input-border: var(--yw-create-work-input-border);
  --yw-route-button-bg: var(--yw-create-work-button-bg);
  --yw-route-button-text: var(--yw-create-work-button-text);
  --yw-route-button-border: var(--yw-create-work-button-border);
  --yw-route-button-hover: var(--yw-create-work-button-hover);
  --yw-route-secondary-button-bg: var(--yw-create-work-secondary-button-bg);
  --yw-route-secondary-button-text: var(--yw-create-work-secondary-button-text);
  --yw-route-secondary-button-border: var(
    --yw-create-work-secondary-button-border
  );
  --yw-route-danger-button-bg: var(--yw-create-work-danger-button-bg);
  --yw-route-danger-button-text: var(--yw-create-work-danger-button-text);
  --yw-route-danger-button-border: var(--yw-create-work-danger-button-border);
  --yw-route-stat-bg: var(--yw-create-work-stat-bg);
  --yw-route-stat-text: var(--yw-create-work-stat-text);
  --yw-route-row-bg: var(--yw-create-work-row-bg);
  --yw-route-row-text: var(--yw-create-work-row-text);
  --yw-route-empty-bg: var(--yw-create-work-empty-bg);
  --yw-route-empty-text: var(--yw-create-work-empty-text);
  --yw-route-image-bg: var(--yw-create-work-image-bg);
  --yw-route-cover-overlay: var(--yw-create-work-cover-overlay);
  --yw-route-toolbar-bg: var(--yw-create-work-toolbar-bg);
  --yw-route-toolbar-button-bg: var(--yw-create-work-toolbar-button-bg);
  --yw-route-toolbar-button-text: var(--yw-create-work-toolbar-button-text);
  --yw-route-filter-active-bg: var(--yw-create-work-filter-active-bg);
  --yw-route-filter-active-text: var(--yw-create-work-filter-active-text);
  --yw-route-filter-idle-bg: var(--yw-create-work-filter-idle-bg);
  --yw-route-filter-idle-text: var(--yw-create-work-filter-idle-text);
  --yw-route-filter-border: var(--yw-create-work-filter-border);
  --yw-route-unread-bg: var(--yw-create-work-unread-bg);
  --yw-route-unread-text: var(--yw-create-work-unread-text);
  --yw-route-selected-bg: var(--yw-create-work-selected-bg);
  --yw-route-selected-text: var(--yw-create-work-selected-text);
  --yw-route-warning-border: var(--yw-create-work-warning-border);
  --yw-route-warning-text: var(--yw-create-work-warning-text);
  --yw-route-on-bg: var(--yw-create-work-on-bg);
  --yw-route-on-text: var(--yw-create-work-on-text);
  --yw-route-off-bg: var(--yw-create-work-off-bg);
  --yw-route-off-text: var(--yw-create-work-off-text);
  --yw-route-social-icon-bg: var(--yw-create-work-social-icon-bg);
  --yw-route-social-icon-text: var(--yw-create-work-social-icon-text);
  --yw-route-progress-bg: var(--yw-create-work-progress-bg);
  --yw-route-progress-fill: var(--yw-create-work-progress-fill);
  --yw-route-nav-bg: var(--yw-create-work-nav-bg);
  --yw-route-nav-text: var(--yw-create-work-nav-text);
  --yw-route-publish-bg: var(--yw-create-work-publish-bg);
  --yw-route-publish-text: var(--yw-create-work-publish-text);
  --yw-route-danger-bg: var(--yw-create-work-danger-bg);
  --yw-route-danger-text: var(--yw-create-work-danger-text);
  --yw-route-tab-active-bg: var(--yw-create-work-tab-active-bg);
  --yw-route-tab-active-text: var(--yw-create-work-tab-active-text);
  --yw-route-tab-idle-bg: var(--yw-create-work-tab-idle-bg);
  --yw-route-tab-idle-text: var(--yw-create-work-tab-idle-text);
  --yw-route-error-bg: var(--yw-create-work-error-bg);
  --yw-route-success-bg: var(--yw-create-work-success-bg);
  --yw-route-success-text: var(--yw-create-work-success-text);
  --yw-route-incoming-text: var(--yw-create-work-incoming-text);
  --yw-route-outgoing-text: var(--yw-create-work-outgoing-text);
  --yw-route-divider: var(--yw-create-work-divider);
}

body.create-work-route .site-main .publish-rules-shell {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--yw-create-work-hero) 72%, transparent),
      var(--yw-create-work-surface)
    );
  border-color: var(--yw-create-work-border);
  color: var(--yw-create-work-text);
}

body.create-work-route .site-main .publish-rules-header {
  border-color: var(--yw-create-work-border);
}

body.create-work-route .site-main .publish-rules-back,
body.create-work-route .site-main .publish-rules-secondary {
  background: var(--yw-create-work-secondary-button-bg);
  border-color: var(--yw-create-work-secondary-button-border);
  color: var(--yw-create-work-secondary-button-text);
}

body.create-work-route .site-main .publish-rules-back:hover,
body.create-work-route .site-main .publish-rules-secondary:hover {
  background: color-mix(
    in srgb,
    var(--yw-create-work-secondary-button-bg) 82%,
    var(--yw-create-work-accent)
  );
  border-color: var(--yw-create-work-accent);
}

body.create-work-route .site-main .publish-rules-progress {
  color: var(--yw-create-work-muted);
}

body.create-work-route .site-main .publish-rules-progress > div:last-child {
  background: var(--yw-create-work-surface-alt);
}

body.create-work-route
  .site-main
  .publish-rules-progress
  > div:last-child
  > span {
  background: var(--yw-create-work-accent);
}

body.create-work-route .site-main .publish-rules-kicker {
  background: var(--yw-create-work-label-bg);
  border-color: var(--yw-create-work-border);
  color: var(--yw-create-work-label-text);
}

body.create-work-route .site-main .publish-rules-title {
  color: var(--yw-create-work-text);
}

body.create-work-route .site-main .publish-rules-subtitle {
  color: var(--yw-create-work-muted);
}

body.create-work-route .site-main .publish-rules-card {
  background: color-mix(
    in srgb,
    var(--yw-create-work-card-bg) 88%,
    var(--yw-create-work-surface-alt)
  );
  border: 1px solid transparent;
  color: var(--yw-create-work-card-text);
  box-shadow: 0 16px 42px
    color-mix(in srgb, var(--yw-create-work-card-border) 14%, transparent);
}

body.create-work-route .site-main .publish-rules-card-positive {
  background: color-mix(
    in srgb,
    var(--yw-create-work-on-bg) 12%,
    var(--yw-create-work-card-bg)
  );
}

body.create-work-route .site-main .publish-rules-card-warning {
  background: color-mix(
    in srgb,
    var(--yw-create-work-warning-text) 12%,
    var(--yw-create-work-card-bg)
  );
}

body.create-work-route .site-main .publish-rules-card-danger {
  background: color-mix(
    in srgb,
    var(--yw-create-work-danger-button-bg) 12%,
    var(--yw-create-work-card-bg)
  );
}

body.create-work-route .site-main .publish-rules-card-info,
body.create-work-route .site-main .publish-rules-card-neutral {
  background: color-mix(
    in srgb,
    var(--yw-create-work-accent) 10%,
    var(--yw-create-work-card-bg)
  );
}

body.create-work-route .site-main .publish-rules-card-title {
  color: var(--yw-create-work-card-text);
}

body.create-work-route .site-main .publish-rules-list {
  color: var(--yw-create-work-card-muted);
}

body.create-work-route .site-main .publish-rules-list span[aria-hidden="true"] {
  background: var(--yw-create-work-accent);
}

body.create-work-route .site-main .publish-rules-card-icon {
  background: color-mix(
    in srgb,
    var(--yw-create-work-option-icon-bg) 72%,
    var(--yw-create-work-card-bg)
  );
  color: var(--yw-create-work-option-icon-text);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--yw-create-work-card-border) 45%, transparent);
}

body.create-work-route
  .site-main
  .publish-rules-card-positive
  .publish-rules-card-icon {
  color: var(--yw-create-work-on-bg);
}

body.create-work-route
  .site-main
  .publish-rules-card-warning
  .publish-rules-card-icon {
  color: var(--yw-create-work-warning-text);
}

body.create-work-route
  .site-main
  .publish-rules-card-danger
  .publish-rules-card-icon {
  color: var(--yw-create-work-danger-button-bg);
}

body.create-work-route .site-main .publish-rules-actions {
  background: var(--yw-create-work-card-bg);
  border-color: var(--yw-create-work-card-border);
  color: var(--yw-create-work-card-text);
}

body.create-work-route .site-main .publish-rules-checkbox {
  color: var(--yw-create-work-card-text);
}

body.create-work-route .site-main .publish-rules-checkbox input {
  accent-color: var(--yw-create-work-accent);
  background: var(--yw-create-work-input-bg);
  border-color: var(--yw-create-work-input-border);
}

body.create-work-route .site-main .publish-rules-primary {
  background: linear-gradient(
    135deg,
    var(--yw-create-work-selected-bg),
    color-mix(
      in srgb,
      var(--yw-create-work-selected-bg) 78%,
      var(--yw-create-work-button-bg)
    )
  );
  border-color: var(--yw-create-work-selected-bg);
  color: var(--yw-create-work-selected-text);
  box-shadow: 0 14px 32px
    color-mix(in srgb, var(--yw-create-work-selected-bg) 32%, transparent);
}

body.create-work-route .site-main .publish-rules-primary:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    var(--yw-create-work-button-hover),
    var(--yw-create-work-selected-bg)
  );
  transform: translateY(-1px);
}

body.messages-route {
  --yw-route-bg: var(--yw-messages-bg);
  --yw-route-hero: var(--yw-messages-hero);
  --yw-route-surface: var(--yw-messages-surface);
  --yw-route-surface-alt: var(--yw-messages-surface-alt);
  --yw-route-text: var(--yw-messages-text);
  --yw-route-muted: var(--yw-messages-muted);
  --yw-route-border: var(--yw-messages-border);
  --yw-route-accent: var(--yw-messages-accent);
  --yw-route-icon: var(--yw-messages-icon);
  --yw-route-card-bg: var(--yw-messages-card-bg);
  --yw-route-card-text: var(--yw-messages-card-text);
  --yw-route-card-muted: var(--yw-messages-card-muted);
  --yw-route-card-border: var(--yw-messages-card-border);
  --yw-route-label-bg: var(--yw-messages-label-bg);
  --yw-route-label-text: var(--yw-messages-label-text);
  --yw-route-input-bg: var(--yw-messages-input-bg);
  --yw-route-input-text: var(--yw-messages-input-text);
  --yw-route-input-placeholder: var(--yw-messages-input-placeholder);
  --yw-route-input-border: var(--yw-messages-input-border);
  --yw-route-button-bg: var(--yw-messages-button-bg);
  --yw-route-button-text: var(--yw-messages-button-text);
  --yw-route-button-border: var(--yw-messages-button-border);
  --yw-route-button-hover: var(--yw-messages-button-hover);
  --yw-route-secondary-button-bg: var(--yw-messages-secondary-button-bg);
  --yw-route-secondary-button-text: var(--yw-messages-secondary-button-text);
  --yw-route-secondary-button-border: var(
    --yw-messages-secondary-button-border
  );
  --yw-route-danger-button-bg: var(--yw-messages-danger-button-bg);
  --yw-route-danger-button-text: var(--yw-messages-danger-button-text);
  --yw-route-danger-button-border: var(--yw-messages-danger-button-border);
  --yw-route-stat-bg: var(--yw-messages-stat-bg);
  --yw-route-stat-text: var(--yw-messages-stat-text);
  --yw-route-row-bg: var(--yw-messages-row-bg);
  --yw-route-row-text: var(--yw-messages-row-text);
  --yw-route-empty-bg: var(--yw-messages-empty-bg);
  --yw-route-empty-text: var(--yw-messages-empty-text);
  --yw-route-image-bg: var(--yw-messages-image-bg);
  --yw-route-cover-overlay: var(--yw-messages-cover-overlay);
  --yw-route-toolbar-bg: var(--yw-messages-toolbar-bg);
  --yw-route-toolbar-button-bg: var(--yw-messages-toolbar-button-bg);
  --yw-route-toolbar-button-text: var(--yw-messages-toolbar-button-text);
  --yw-route-filter-active-bg: var(--yw-messages-filter-active-bg);
  --yw-route-filter-active-text: var(--yw-messages-filter-active-text);
  --yw-route-filter-idle-bg: var(--yw-messages-filter-idle-bg);
  --yw-route-filter-idle-text: var(--yw-messages-filter-idle-text);
  --yw-route-filter-border: var(--yw-messages-filter-border);
  --yw-route-unread-bg: var(--yw-messages-unread-bg);
  --yw-route-unread-text: var(--yw-messages-unread-text);
  --yw-route-selected-bg: var(--yw-messages-selected-bg);
  --yw-route-selected-text: var(--yw-messages-selected-text);
  --yw-route-warning-border: var(--yw-messages-warning-border);
  --yw-route-warning-text: var(--yw-messages-warning-text);
  --yw-route-on-bg: var(--yw-messages-on-bg);
  --yw-route-on-text: var(--yw-messages-on-text);
  --yw-route-off-bg: var(--yw-messages-off-bg);
  --yw-route-off-text: var(--yw-messages-off-text);
  --yw-route-social-icon-bg: var(--yw-messages-social-icon-bg);
  --yw-route-social-icon-text: var(--yw-messages-social-icon-text);
  --yw-route-progress-bg: var(--yw-messages-progress-bg);
  --yw-route-progress-fill: var(--yw-messages-progress-fill);
  --yw-route-nav-bg: var(--yw-messages-nav-bg);
  --yw-route-nav-text: var(--yw-messages-nav-text);
  --yw-route-publish-bg: var(--yw-messages-publish-bg);
  --yw-route-publish-text: var(--yw-messages-publish-text);
  --yw-route-danger-bg: var(--yw-messages-danger-bg);
  --yw-route-danger-text: var(--yw-messages-danger-text);
  --yw-route-tab-active-bg: var(--yw-messages-tab-active-bg);
  --yw-route-tab-active-text: var(--yw-messages-tab-active-text);
  --yw-route-tab-idle-bg: var(--yw-messages-tab-idle-bg);
  --yw-route-tab-idle-text: var(--yw-messages-tab-idle-text);
  --yw-route-error-bg: var(--yw-messages-error-bg);
  --yw-route-success-bg: var(--yw-messages-success-bg);
  --yw-route-success-text: var(--yw-messages-success-text);
  --yw-route-incoming-text: var(--yw-messages-incoming-text);
  --yw-route-outgoing-text: var(--yw-messages-outgoing-text);
  --yw-route-divider: var(--yw-messages-divider);
}

body.messages-route .messages-workspace {
  --yw-dashboard-bg: var(--yw-messages-bg);
  --yw-dashboard-surface: var(--yw-messages-surface);
  --yw-dashboard-surface-alt: var(--yw-messages-surface-alt);
  --yw-dashboard-text: var(--yw-messages-text);
  --yw-dashboard-muted: var(--yw-messages-muted);
  --yw-dashboard-border: var(--yw-messages-border);
  --yw-dashboard-accent: var(--yw-messages-accent);
  background-color: var(--yw-messages-bg) !important;
  color: var(--yw-messages-text) !important;
}

body.draft-route {
  --yw-route-bg: var(--yw-draft-bg);
  --yw-route-hero: var(--yw-draft-hero);
  --yw-route-surface: var(--yw-draft-surface);
  --yw-route-surface-alt: var(--yw-draft-surface-alt);
  --yw-route-text: var(--yw-draft-text);
  --yw-route-muted: var(--yw-draft-muted);
  --yw-route-border: var(--yw-draft-border);
  --yw-route-accent: var(--yw-draft-accent);
  --yw-route-icon: var(--yw-draft-icon);
  --yw-route-card-bg: var(--yw-draft-card-bg);
  --yw-route-card-text: var(--yw-draft-card-text);
  --yw-route-card-muted: var(--yw-draft-card-muted);
  --yw-route-card-border: var(--yw-draft-card-border);
  --yw-route-label-bg: var(--yw-draft-label-bg);
  --yw-route-label-text: var(--yw-draft-label-text);
  --yw-route-input-bg: var(--yw-draft-input-bg);
  --yw-route-input-text: var(--yw-draft-input-text);
  --yw-route-input-placeholder: var(--yw-draft-input-placeholder);
  --yw-route-input-border: var(--yw-draft-input-border);
  --yw-route-button-bg: var(--yw-draft-button-bg);
  --yw-route-button-text: var(--yw-draft-button-text);
  --yw-route-button-border: var(--yw-draft-button-border);
  --yw-route-button-hover: var(--yw-draft-button-hover);
  --yw-route-secondary-button-bg: var(--yw-draft-secondary-button-bg);
  --yw-route-secondary-button-text: var(--yw-draft-secondary-button-text);
  --yw-route-secondary-button-border: var(--yw-draft-secondary-button-border);
  --yw-route-danger-button-bg: var(--yw-draft-danger-button-bg);
  --yw-route-danger-button-text: var(--yw-draft-danger-button-text);
  --yw-route-danger-button-border: var(--yw-draft-danger-button-border);
  --yw-route-stat-bg: var(--yw-draft-stat-bg);
  --yw-route-stat-text: var(--yw-draft-stat-text);
  --yw-route-row-bg: var(--yw-draft-row-bg);
  --yw-route-row-text: var(--yw-draft-row-text);
  --yw-route-empty-bg: var(--yw-draft-empty-bg);
  --yw-route-empty-text: var(--yw-draft-empty-text);
  --yw-route-image-bg: var(--yw-draft-image-bg);
  --yw-route-cover-overlay: var(--yw-draft-cover-overlay);
  --yw-route-toolbar-bg: var(--yw-draft-toolbar-bg);
  --yw-route-toolbar-button-bg: var(--yw-draft-toolbar-button-bg);
  --yw-route-toolbar-button-text: var(--yw-draft-toolbar-button-text);
  --yw-route-filter-active-bg: var(--yw-draft-filter-active-bg);
  --yw-route-filter-active-text: var(--yw-draft-filter-active-text);
  --yw-route-filter-idle-bg: var(--yw-draft-filter-idle-bg);
  --yw-route-filter-idle-text: var(--yw-draft-filter-idle-text);
  --yw-route-filter-border: var(--yw-draft-filter-border);
  --yw-route-unread-bg: var(--yw-draft-unread-bg);
  --yw-route-unread-text: var(--yw-draft-unread-text);
  --yw-route-selected-bg: var(--yw-draft-selected-bg);
  --yw-route-selected-text: var(--yw-draft-selected-text);
  --yw-route-warning-border: var(--yw-draft-warning-border);
  --yw-route-warning-text: var(--yw-draft-warning-text);
  --yw-route-on-bg: var(--yw-draft-on-bg);
  --yw-route-on-text: var(--yw-draft-on-text);
  --yw-route-off-bg: var(--yw-draft-off-bg);
  --yw-route-off-text: var(--yw-draft-off-text);
  --yw-route-social-icon-bg: var(--yw-draft-social-icon-bg);
  --yw-route-social-icon-text: var(--yw-draft-social-icon-text);
  --yw-route-progress-bg: var(--yw-draft-progress-bg);
  --yw-route-progress-fill: var(--yw-draft-progress-fill);
  --yw-route-nav-bg: var(--yw-draft-nav-bg);
  --yw-route-nav-text: var(--yw-draft-nav-text);
  --yw-route-publish-bg: var(--yw-draft-publish-bg);
  --yw-route-publish-text: var(--yw-draft-publish-text);
  --yw-route-danger-bg: var(--yw-draft-danger-bg);
  --yw-route-danger-text: var(--yw-draft-danger-text);
  --yw-route-tab-active-bg: var(--yw-draft-tab-active-bg);
  --yw-route-tab-active-text: var(--yw-draft-tab-active-text);
  --yw-route-tab-idle-bg: var(--yw-draft-tab-idle-bg);
  --yw-route-tab-idle-text: var(--yw-draft-tab-idle-text);
  --yw-route-error-bg: var(--yw-draft-error-bg);
  --yw-route-success-bg: var(--yw-draft-success-bg);
  --yw-route-success-text: var(--yw-draft-success-text);
  --yw-route-incoming-text: var(--yw-draft-incoming-text);
  --yw-route-outgoing-text: var(--yw-draft-outgoing-text);
  --yw-route-divider: var(--yw-draft-divider);
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main {
  --yw-dashboard-bg: var(--yw-route-bg);
  --yw-dashboard-hero: var(--yw-route-hero);
  --yw-dashboard-surface: var(--yw-route-surface);
  --yw-dashboard-surface-alt: var(--yw-route-surface-alt);
  --yw-dashboard-text: var(--yw-route-text);
  --yw-dashboard-muted: var(--yw-route-muted);
  --yw-dashboard-border: var(--yw-route-border);
  --yw-dashboard-accent: var(--yw-route-accent);
  --yw-card-bg: var(--yw-route-card-bg);
  --yw-card-text: var(--yw-route-card-text);
  --yw-card-muted: var(--yw-route-card-muted);
  --yw-card-border: var(--yw-route-card-border);
  --site-background: var(--yw-route-bg);
  --site-foreground: var(--yw-route-text);
  --site-muted-foreground: var(--yw-route-muted);
  --site-surface: var(--yw-route-surface);
  --site-surface-fg: var(--yw-route-text);
  --site-surface-muted: var(--yw-route-muted);
  --site-surface-alt: var(--yw-route-surface-alt);
  --site-surface-alt-fg: var(--yw-route-text);
  --site-surface-alt-muted: var(--yw-route-muted);
  --site-border: var(--yw-route-border);
  background-color: var(--yw-route-bg) !important;
  color: var(--yw-route-text) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  main,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .dashboard-workspace {
  background-color: var(--yw-route-bg) !important;
  color: var(--yw-route-text) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  section,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  article,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  .rounded-3xl,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  .rounded-2xl {
  border-color: var(--yw-route-border) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  svg {
  color: var(--yw-route-icon);
}

body.reading-library-route .site-main article,
body.reading-library-route .reading-library-card {
  background-color: var(--yw-reading-library-card-bg) !important;
  color: var(--yw-reading-library-card-text) !important;
  border-color: var(--yw-reading-library-card-border) !important;
}

body.reading-library-route .site-main article .text-zinc-400,
body.reading-library-route .site-main article .text-zinc-500,
body.reading-library-route .site-main article .text-site-surface-muted {
  color: var(--yw-reading-library-card-muted) !important;
}

body.reading-library-route .site-main button.border-white,
body.reading-library-route .site-main button.bg-white {
  background-color: var(--yw-reading-library-filter-active-bg) !important;
  color: var(--yw-reading-library-filter-active-text) !important;
  border-color: var(--yw-reading-library-filter-active-bg) !important;
}

body.reading-library-route .site-main button.border-zinc-700,
body.reading-library-route .site-main select {
  background-color: var(--yw-reading-library-filter-idle-bg) !important;
  color: var(--yw-reading-library-filter-idle-text) !important;
  border-color: var(--yw-reading-library-filter-border) !important;
}

body.notifications-route .site-main .bg-white.text-black,
body.notifications-route .site-main button.border-white {
  background-color: var(--yw-notifications-unread-bg) !important;
  color: var(--yw-notifications-unread-text) !important;
  border-color: var(--yw-notifications-unread-bg) !important;
}

body.notification-settings-route .site-main .bg-emerald-500\/15 {
  background-color: color-mix(
    in srgb,
    var(--yw-notification-settings-on-bg) 18%,
    transparent
  ) !important;
  color: var(--yw-notification-settings-on-bg) !important;
}

body.notification-settings-route .site-main .bg-red-500\/15 {
  background-color: color-mix(
    in srgb,
    var(--yw-notification-settings-off-bg) 18%,
    transparent
  ) !important;
  color: var(--yw-notification-settings-off-bg) !important;
}

body.profile-route .site-main [class*="Instagram"],
body.profile-route .site-main svg,
body.profile-route .site-main .text-pink-300,
body.profile-route .site-main .text-sky-300,
body.profile-route .site-main .text-blue-300,
body.profile-route .site-main .text-red-300 {
  color: var(--yw-profile-social-icon-text) !important;
}

body.profile-route .site-main .bg-pink-500\/15,
body.profile-route .site-main .bg-blue-500\/15,
body.profile-route .site-main .bg-red-500\/15,
body.profile-route .site-main .bg-sky-500\/15 {
  background-color: var(--yw-profile-social-icon-bg) !important;
}

body.profile-route .site-main .bg-gradient-to-r,
body.profile-route .site-main .from-emerald-500,
body.profile-route .site-main .to-sky-500 {
  background-image: none !important;
  background-color: var(--yw-profile-progress-fill) !important;
}

body.create-work-route .site-main .border-orange-900,
body.create-work-route .site-main .border-amber-900 {
  border-color: var(--yw-create-work-warning-border) !important;
}

body.create-work-route .site-main .text-yellow-100,
body.create-work-route .site-main .text-amber-200,
body.create-work-route .site-main .text-orange-200 {
  color: var(--yw-create-work-warning-text) !important;
}

body.create-work-route .site-main .bg-yellow-400,
body.create-work-route .site-main .bg-amber-400,
body.create-work-route .site-main .bg-orange-400 {
  background-color: var(--yw-create-work-selected-bg) !important;
  color: var(--yw-create-work-selected-text) !important;
}

body.draft-route .site-main [href*="/chapters"],
body.draft-route .site-main [href*="/story"],
body.draft-route .site-main [href*="/edit"] {
  background-color: var(--yw-draft-nav-bg) !important;
  color: var(--yw-draft-nav-text) !important;
  border-color: var(--yw-draft-border) !important;
}

body.draft-route .site-main .bg-emerald-500,
body.draft-route .site-main .text-emerald-300,
body.draft-route .site-main .border-emerald-700 {
  background-color: var(--yw-draft-publish-bg) !important;
  color: var(--yw-draft-publish-text) !important;
  border-color: var(--yw-draft-publish-bg) !important;
}

body.draft-route .site-main .bg-red-500,
body.draft-route .site-main .text-red-300,
body.draft-route .site-main .border-red-700 {
  background-color: var(--yw-draft-danger-bg) !important;
  color: var(--yw-draft-danger-text) !important;
  border-color: var(--yw-draft-danger-bg) !important;
}

body.auth-route .site-main {
  --site-background: var(--yw-login-bg);
  --site-foreground: var(--yw-login-text);
  --site-surface: var(--yw-login-surface);
  --site-surface-alt: var(--yw-login-surface-alt);
  --site-border: var(--yw-login-border);
  background-color: var(--yw-login-bg) !important;
  color: var(--yw-login-text) !important;
}

body.auth-route .site-main .bg-zinc-900,
body.auth-route .site-main .bg-zinc-950,
body.auth-route .site-main .bg-zinc-950\/60,
body.auth-route .site-main .bg-site-surface {
  background-color: var(--yw-login-surface) !important;
  color: var(--yw-login-text) !important;
  border-color: var(--yw-login-border) !important;
}

body.auth-route .site-main .bg-zinc-950,
body.auth-route .site-main .bg-site-surface-alt {
  background-color: var(--yw-login-surface-alt) !important;
}

body.auth-route .site-main .text-white,
body.auth-route .site-main .text-zinc-100,
body.auth-route .site-main .text-zinc-300 {
  color: var(--yw-login-text) !important;
}

body.auth-route .site-main .text-zinc-400,
body.auth-route .site-main .text-zinc-500 {
  color: var(--yw-login-muted) !important;
}

body.auth-route .site-main .border-zinc-700,
body.auth-route .site-main .border-zinc-800 {
  border-color: var(--yw-login-border) !important;
}

body.auth-route .site-main button.bg-white,
body.auth-route .site-main .bg-white.text-black {
  background-color: var(--yw-login-tab-active-bg) !important;
  color: var(--yw-login-tab-active-text) !important;
}

body.auth-route .site-main button:not(.bg-white),
body.auth-route .site-main a {
  color: var(--yw-login-tab-idle-text);
}

/* Real workspace page binding layer.
   These rules bind actual existing page markup to the expanded theme tokens,
   instead of relying only on the simplified preview cards in the admin panel. */
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main {
  --site-background: var(--yw-route-bg);
  --site-foreground: var(--yw-route-text);
  --site-muted-foreground: var(--yw-route-muted);
  --site-surface: var(--yw-route-surface);
  --site-surface-fg: var(--yw-route-text);
  --site-surface-muted: var(--yw-route-muted);
  --site-surface-alt: var(--yw-route-surface-alt);
  --site-surface-alt-fg: var(--yw-route-text);
  --site-surface-alt-muted: var(--yw-route-muted);
  --site-border: var(--yw-route-border);
  --yw-dashboard-bg: var(--yw-route-bg);
  --yw-dashboard-hero: var(--yw-route-hero);
  --yw-dashboard-surface: var(--yw-route-surface);
  --yw-dashboard-surface-alt: var(--yw-route-surface-alt);
  --yw-dashboard-text: var(--yw-route-text);
  --yw-dashboard-muted: var(--yw-route-muted);
  --yw-dashboard-border: var(--yw-route-border);
  --yw-dashboard-accent: var(--yw-route-accent);
  --yw-card-bg: var(--yw-route-card-bg);
  --yw-card-text: var(--yw-route-card-text);
  --yw-card-muted: var(--yw-route-card-muted);
  --yw-card-border: var(--yw-route-card-border);
  background: var(--yw-route-bg) !important;
  color: var(--yw-route-text) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(h1, h2, h3, h4, h5, h6, .font-bold, .font-semibold) {
  color: var(--yw-route-text) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(
    p,
    small,
    label,
    .text-sm,
    .text-xs,
    .text-zinc-300,
    .text-zinc-400,
    .text-zinc-500,
    .text-zinc-600,
    .text-gray-400,
    .text-gray-500,
    .text-slate-400,
    .text-slate-500,
    .text-site-muted,
    .text-site-surface-muted
  ) {
  color: var(--yw-route-muted) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(section, article, aside, .rounded-3xl, .rounded-2xl):not(button):not(
    a
  ):not(input):not(textarea):not(select) {
  border-color: var(--yw-route-border) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(
    .bg-white,
    .bg-zinc-50,
    .bg-zinc-100,
    .bg-zinc-900,
    .bg-zinc-950,
    .bg-zinc-950\/60,
    .bg-zinc-900\/60,
    .bg-black,
    .bg-black\/30
  ):not(button):not(a):not(input):not(textarea):not(select):not(.rounded-full) {
  background-color: var(--yw-route-surface) !important;
  color: var(--yw-route-text) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(
    .bg-zinc-800,
    .bg-zinc-800\/60,
    .bg-zinc-950\/40,
    .bg-zinc-950\/70,
    .bg-site-surface-alt
  ):not(button):not(a):not(input):not(textarea):not(select) {
  background-color: var(--yw-route-surface-alt) !important;
  color: var(--yw-route-text) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  input,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  textarea,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  select,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  [contenteditable="true"] {
  background-color: var(--yw-route-input-bg) !important;
  color: var(--yw-route-input-text) !important;
  border-color: var(--yw-route-input-border) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  input::placeholder,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  textarea::placeholder {
  color: var(--yw-route-input-placeholder) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(.rounded-full, .inline-flex.rounded-full):not(img):not(svg) {
  border-color: var(--yw-route-border);
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(.rounded-full.border, .inline-flex.rounded-full.border):not(button):not(
    a
  ) {
  background-color: var(--yw-route-label-bg) !important;
  color: var(--yw-route-label-text) !important;
  border-color: color-mix(
    in srgb,
    var(--yw-route-label-text) 28%,
    var(--yw-route-border)
  ) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  button:not(:disabled):not([class*="bg-red"]):not([class*="text-red"]):not(
    [class*="border-red"]
  ),
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  a.rounded-xl:not([href*="delete"]):not([class*="text-red"]):not(
    [class*="border-red"]
  ) {
  border-color: var(--yw-route-secondary-button-border);
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(
    button.bg-white,
    a.bg-white,
    button.bg-black,
    a.bg-black,
    button.bg-zinc-950,
    a.bg-zinc-950,
    .site-button-primary
  ) {
  background-color: var(--yw-route-button-bg) !important;
  color: var(--yw-route-button-text) !important;
  border-color: var(--yw-route-button-border) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  button:disabled,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  a[aria-disabled="true"] {
  background-color: var(--yw-button-disabled-bg) !important;
  color: var(--yw-button-disabled-text) !important;
  border-color: var(--yw-button-disabled-bg) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(
    .border-red-700,
    .border-red-800,
    .border-red-900,
    .text-red-300,
    .text-red-400,
    .bg-red-950\/20,
    .bg-red-950\/30,
    .bg-red-950\/40,
    button[class*="red"]
  ) {
  border-color: var(--yw-route-danger-button-border) !important;
  color: var(--yw-route-danger-button-text) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  button[class*="red"],
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  .bg-red-950\/20,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  .bg-red-950\/30,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  .bg-red-950\/40 {
  background-color: color-mix(
    in srgb,
    var(--yw-route-danger-button-bg) 16%,
    var(--yw-route-surface)
  ) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(
    .grid > .rounded-2xl,
    .grid > .rounded-3xl,
    .grid > article,
    .grid > section
  ) {
  border-color: var(--yw-route-card-border) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(.grid > .rounded-2xl, .grid > .rounded-3xl):not(button):not(a) {
  background-color: var(--yw-route-card-bg) !important;
  color: var(--yw-route-card-text) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  .bg-gradient-to-br,
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  .bg-gradient-to-r {
  background-image: none !important;
  background-color: var(--yw-route-surface) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  .bg-gradient-to-t {
  background-image: linear-gradient(
    to top,
    var(--yw-route-cover-overlay),
    transparent
  ) !important;
}

body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(.bg-zinc-950, .bg-zinc-900, .bg-zinc-800).aspect-\[2\/3\],
body:is(
    .reading-library-route,
    .subscriptions-route,
    .notifications-route,
    .notification-settings-route,
    .profile-route,
    .create-work-route,
    .draft-route,
    .messages-route
  )
  .site-main
  :is(.h-40, .h-56, .h-64).bg-zinc-950 {
  background-color: var(--yw-route-image-bg) !important;
}

body.reading-library-route .site-main article {
  background-color: var(--yw-reading-library-card-bg) !important;
  color: var(--yw-reading-library-card-text) !important;
  border-color: var(--yw-reading-library-card-border) !important;
}

body.reading-library-route .site-main article .rounded-full {
  background-color: var(--yw-reading-library-label-bg) !important;
  color: var(--yw-reading-library-label-text) !important;
}

body.subscriptions-route .site-main article,
body.subscriptions-route .site-main .grid > div.rounded-3xl {
  background-color: var(--yw-subscriptions-card-bg) !important;
  color: var(--yw-subscriptions-card-text) !important;
  border-color: var(--yw-subscriptions-card-border) !important;
}

body.notifications-route .site-main article,
body.notifications-route .site-main .space-y-3 > div,
body.notifications-route .site-main .space-y-4 > div {
  background-color: var(--yw-notifications-row-bg) !important;
  color: var(--yw-notifications-row-text) !important;
  border-color: var(--yw-notifications-card-border) !important;
}

body.notifications-route .site-main button[class*="bg-white"],
body.notifications-route .site-main button[class*="border-white"] {
  background-color: var(--yw-notifications-filter-active-bg) !important;
  color: var(--yw-notifications-filter-active-text) !important;
  border-color: var(--yw-notifications-filter-active-bg) !important;
}

body.notification-settings-route .site-main .space-y-3 > div,
body.notification-settings-route .site-main .space-y-4 > div,
body.notification-settings-route .site-main article {
  background-color: var(--yw-notification-settings-row-bg) !important;
  color: var(--yw-notification-settings-row-text) !important;
  border-color: var(--yw-notification-settings-card-border) !important;
}

body.profile-route .site-main aside > div,
body.profile-route .site-main form,
body.profile-route .site-main .grid > section,
body.profile-route .site-main .grid > div.rounded-3xl {
  background-color: var(--yw-profile-card-bg) !important;
  color: var(--yw-profile-card-text) !important;
  border-color: var(--yw-profile-card-border) !important;
}

body.profile-route .site-main .h-40,
body.profile-route .site-main .h-24.w-24 {
  background-color: var(--yw-profile-image-bg) !important;
}

body.create-work-route .site-main form > div,
body.create-work-route .site-main form > section,
body.create-work-route .site-main .rounded-3xl {
  border-color: var(--yw-create-work-card-border) !important;
}

body.create-work-route .site-main form > div:not(section),
body.create-work-route .site-main form > section:not([class*="amber"]) {
  background-color: var(--yw-create-work-card-bg) !important;
  color: var(--yw-create-work-card-text) !important;
}

body.create-work-route .site-main section[class*="amber"],
body.create-work-route .site-main .border-amber-900,
body.create-work-route .site-main .border-orange-900 {
  background-color: color-mix(
    in srgb,
    var(--yw-create-work-warning-text) 8%,
    var(--yw-create-work-surface)
  ) !important;
  border-color: var(--yw-create-work-warning-border) !important;
  color: var(--yw-create-work-warning-text) !important;
}

body.create-work-route
  .site-main
  .publish-rules-grid
  > .publish-rules-card {
  background: color-mix(
    in srgb,
    var(--yw-create-work-card-bg) 86%,
    var(--yw-create-work-surface-alt)
  ) !important;
  background-color: color-mix(
    in srgb,
    var(--yw-create-work-card-bg) 86%,
    var(--yw-create-work-surface-alt)
  ) !important;
  border-color: transparent !important;
  color: var(--yw-create-work-card-text) !important;
  overflow: hidden;
}

body.create-work-route
  .site-main
  .publish-rules-grid
  > .publish-rules-card-positive {
  background: color-mix(
    in srgb,
    var(--yw-create-work-on-bg) 14%,
    var(--yw-create-work-card-bg)
  ) !important;
  background-color: color-mix(
    in srgb,
    var(--yw-create-work-on-bg) 14%,
    var(--yw-create-work-card-bg)
  ) !important;
}

body.create-work-route
  .site-main
  .publish-rules-grid
  > .publish-rules-card-warning {
  background: color-mix(
    in srgb,
    var(--yw-create-work-warning-text) 14%,
    var(--yw-create-work-card-bg)
  ) !important;
  background-color: color-mix(
    in srgb,
    var(--yw-create-work-warning-text) 14%,
    var(--yw-create-work-card-bg)
  ) !important;
}

body.create-work-route
  .site-main
  .publish-rules-grid
  > .publish-rules-card-danger {
  background: color-mix(
    in srgb,
    var(--yw-create-work-danger-button-bg) 14%,
    var(--yw-create-work-card-bg)
  ) !important;
  background-color: color-mix(
    in srgb,
    var(--yw-create-work-danger-button-bg) 14%,
    var(--yw-create-work-card-bg)
  ) !important;
}

body.create-work-route
  .site-main
  .publish-rules-grid
  > .publish-rules-card-info,
body.create-work-route
  .site-main
  .publish-rules-grid
  > .publish-rules-card-neutral {
  background: color-mix(
    in srgb,
    var(--yw-create-work-accent) 12%,
    var(--yw-create-work-card-bg)
  ) !important;
  background-color: color-mix(
    in srgb,
    var(--yw-create-work-accent) 12%,
    var(--yw-create-work-card-bg)
  ) !important;
}

body.create-work-route
  .site-main
  .publish-rules-grid
  > .publish-rules-card
  > div {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.create-work-route .site-main button[class*="bg-yellow"],
body.create-work-route .site-main button[class*="bg-amber"],
body.create-work-route .site-main button[class*="bg-orange"],
body.create-work-route .site-main .bg-yellow-400,
body.create-work-route .site-main .bg-amber-400,
body.create-work-route .site-main .bg-orange-400 {
  background-color: var(--yw-create-work-selected-bg) !important;
  color: var(--yw-create-work-selected-text) !important;
  border-color: var(--yw-create-work-selected-bg) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section {
  background: var(--yw-create-work-warning-surface) !important;
  border-color: var(--yw-create-work-warning-border) !important;
  color: var(--yw-create-work-warning-text) !important;
}

body:is(.create-work-route, .draft-route) .site-main .create-work-safety-title,
body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-subtitle {
  color: var(--yw-create-work-warning-text) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-description,
body:is(.create-work-route, .draft-route) .site-main .create-work-safety-hint {
  color: var(--yw-create-work-warning-muted) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-counter {
  background-color: var(--yw-create-work-label-bg) !important;
  color: var(--yw-create-work-label-text) !important;
  border-color: var(--yw-create-work-warning-border) !important;
}

body:is(.create-work-route, .draft-route) .site-main .create-work-option-idle {
  background-color: var(--yw-create-work-option-bg) !important;
  color: var(--yw-create-work-option-text) !important;
  border-color: var(--yw-create-work-option-border) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-option-idle:hover {
  background-color: var(--yw-create-work-option-hover-bg) !important;
  border-color: var(--yw-create-work-warning-border) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-option-selected {
  background-color: var(--yw-create-work-warning-selected-bg) !important;
  color: var(--yw-create-work-warning-selected-text) !important;
  border-color: var(--yw-create-work-warning-selected-border) !important;
  box-shadow: 0 16px 36px
    color-mix(
      in srgb,
      var(--yw-create-work-warning-selected-bg) 24%,
      transparent
    ) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-option-subtext-idle {
  color: var(--yw-create-work-option-muted) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-option-subtext-selected {
  color: color-mix(
    in srgb,
    var(--yw-create-work-warning-selected-text) 72%,
    transparent
  ) !important;
}

body:is(.create-work-route, .draft-route) .site-main .create-work-warning-icon {
  background-color: var(--yw-create-work-option-icon-bg) !important;
  color: var(--yw-create-work-option-icon-text) !important;
}

body.draft-route .site-main .rounded-3xl,
body.draft-route .site-main .rounded-2xl,
body.draft-route .site-main article,
body.draft-route .site-main section {
  border-color: var(--yw-draft-card-border) !important;
}

body.draft-route .site-main article,
body.draft-route .site-main section:not(:first-child) .rounded-2xl,
body.draft-route .site-main .rounded-3xl:not(button):not(a) {
  background-color: var(--yw-draft-card-bg) !important;
  color: var(--yw-draft-card-text) !important;
}

body.draft-route .site-main [href*="/chapters"],
body.draft-route .site-main [href*="/story"],
body.draft-route .site-main [href*="/edit"] {
  background-color: var(--yw-draft-nav-bg) !important;
  color: var(--yw-draft-nav-text) !important;
  border-color: var(--yw-draft-border) !important;
}

body.auth-route .site-main {
  --yw-route-input-bg: var(--yw-login-input-bg);
  --yw-route-input-text: var(--yw-login-input-text);
  --yw-route-input-placeholder: var(--yw-login-input-placeholder);
  --yw-route-input-border: var(--yw-login-input-border);
  --yw-route-button-bg: var(--yw-login-button-bg);
  --yw-route-button-text: var(--yw-login-button-text);
  --yw-route-button-border: var(--yw-login-button-border);
}

body.auth-route .site-main input,
body.auth-route .site-main textarea {
  background-color: var(--yw-login-input-bg) !important;
  color: var(--yw-login-input-text) !important;
  border-color: var(--yw-login-input-border) !important;
}

body.auth-route .site-main input::placeholder,
body.auth-route .site-main textarea::placeholder {
  color: var(--yw-login-input-placeholder) !important;
}

body.auth-route .site-main button.bg-white,
body.auth-route .site-main button[type="submit"] {
  background-color: var(--yw-login-button-bg) !important;
  color: var(--yw-login-button-text) !important;
  border-color: var(--yw-login-button-border) !important;
}

/* Messages route: color comes from Admin -> Theme settings, but the main
   panels and message bubbles intentionally do not draw outline borders. */
.messages-workspace section:first-of-type {
  background-color: var(--yw-message-sidebar) !important;
  color: var(--yw-message-text) !important;
}

.messages-workspace section:last-of-type {
  background-color: var(--yw-message-conversation) !important;
  color: var(--yw-message-text) !important;
}

.messages-workspace .message-sidebar-panel,
.messages-workspace .message-thread-panel,
.messages-workspace .message-empty-panel,
.messages-workspace .message-start-panel,
.messages-workspace .message-bubble,
.messages-workspace .message-composer-shell,
.messages-workspace .message-composer-shell > div,
.messages-workspace .message-composer-shell .writer-editor-dark,
.messages-workspace .message-composer-shell .writer-editor-light,
.messages-workspace .message-composer-shell .writer-editor-sepia {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.messages-workspace .message-thread-header,
.messages-workspace .message-composer-divider {
  border: 0 !important;
}

.messages-workspace .message-tab-active,
.messages-workspace .message-dialog-active {
  background-color: var(--yw-message-active-dialog) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-tab-idle,
.messages-workspace .message-dialog-idle {
  background-color: var(--yw-message-sidebar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-tab-idle:hover,
.messages-workspace .message-dialog-idle:hover {
  background-color: color-mix(
    in srgb,
    var(--yw-message-active-dialog) 72%,
    transparent
  ) !important;
}

.messages-workspace
  .message-dialog-active
  :is(.text-zinc-700, .text-zinc-600, .text-zinc-500, .text-zinc-400) {
  color: var(--yw-message-muted) !important;
}

.messages-workspace .message-avatar-active,
.messages-workspace .message-avatar-idle {
  background-color: var(--yw-message-attachment) !important;
  color: var(--yw-message-text) !important;
}

.messages-workspace .message-primary-button {
  background-color: var(--yw-message-accent) !important;
  color: var(--yw-message-primary-button-text, #ffffff) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-primary-button:not(:disabled):hover {
  background-color: color-mix(
    in srgb,
    var(--yw-message-accent) 86%,
    var(--yw-message-text)
  ) !important;
}

.messages-workspace .message-secondary-button {
  background-color: var(--yw-message-toolbar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-secondary-button:hover {
  background-color: color-mix(
    in srgb,
    var(--yw-message-active-dialog) 78%,
    transparent
  ) !important;
}

.messages-workspace .message-danger-button {
  background-color: color-mix(in srgb, #7f1d1d 55%, transparent) !important;
  color: #fecaca !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-danger-button:hover {
  background-color: color-mix(in srgb, #991b1b 68%, transparent) !important;
}

.messages-workspace .message-search-input,
.messages-workspace input.message-search-input {
  background-color: var(--yw-message-composer) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.messages-workspace .message-search-input:focus,
.messages-workspace input.message-search-input:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--yw-message-accent) 36%, transparent) !important;
}

.messages-workspace .message-bubble-incoming {
  background-color: var(--yw-message-incoming) !important;
  color: var(--yw-message-incoming-text) !important;
  border: 0 !important;
}

.messages-workspace .message-bubble-outgoing {
  background-color: var(--yw-message-outgoing) !important;
  color: var(--yw-message-outgoing-text) !important;
  border: 0 !important;
}

.messages-workspace .message-bubble-content-incoming,
.messages-workspace .message-bubble-content-incoming * {
  color: var(--yw-message-incoming-text) !important;
}

.messages-workspace .message-bubble-content-outgoing,
.messages-workspace .message-bubble-content-outgoing * {
  color: var(--yw-message-outgoing-text) !important;
}

.messages-workspace .message-muted-text,
.messages-workspace .message-bubble-meta {
  color: var(--yw-message-muted) !important;
}

.messages-workspace .message-unread-badge {
  background-color: var(--yw-message-accent) !important;
  color: var(--yw-message-primary-button-text, #ffffff) !important;
}

.messages-workspace .message-composer-shell {
  background-color: var(--yw-message-composer) !important;
  color: var(--yw-message-composer-text) !important;
}

.messages-workspace .message-composer-shell .writer-editor-dark,
.messages-workspace .message-composer-shell .writer-editor-light,
.messages-workspace .message-composer-shell .writer-editor-sepia {
  background-color: var(--yw-message-composer) !important;
  color: var(--yw-message-composer-text) !important;
}

.messages-workspace .message-composer-shell .tiptap,
.messages-workspace .message-composer-shell [contenteditable="true"] {
  background-color: var(--yw-message-composer) !important;
  color: var(--yw-message-composer-text) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.messages-workspace .message-composer-shell .writer-editor-dark:focus-within,
.messages-workspace .message-composer-shell .writer-editor-light:focus-within,
.messages-workspace .message-composer-shell .writer-editor-sepia:focus-within,
.messages-workspace .message-composer-shell .tiptap.ProseMirror-focused,
.messages-workspace .message-composer-shell [contenteditable="true"]:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.messages-workspace .message-composer-shell .tiptap-toolbar-button {
  background-color: var(--yw-message-toolbar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-workspace .message-composer-shell .tiptap-toolbar-button:hover,
.messages-workspace .message-composer-shell .tiptap-toolbar-button.bg-white,
.messages-workspace
  .message-composer-shell
  .tiptap-toolbar-button.border-white {
  background-color: var(--yw-message-active-dialog) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-workspace .message-emoji-panel {
  background-color: var(--yw-message-sidebar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.35) !important;
}

.messages-workspace .message-emoji-button:hover {
  background-color: var(--yw-message-active-dialog) !important;
}

.messages-workspace
  .message-composer-shell
  .tiptap.ProseMirror-focused
  p.is-editor-empty:first-child::after,
.messages-workspace
  .message-composer-shell
  .tiptap.ProseMirror-focused
  p:not(.is-editor-empty):last-child::after {
  content: none !important;
  display: none !important;
}

/* Dashboard work list: the outer row is only a layout wrapper now. The cover
   and information panel are themed separately, so do not paint the whole row. */
.dashboard-workspace .dashboard-work-item,
.dashboard-workspace .dashboard-work-item:hover {
  background: transparent !important;
  border-color: transparent !important;
}

/* Strong final override for the age/content-warning editor block.
   Draft pages have broad .rounded-3xl rules, so this block must stay later. */
body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section {
  background: var(--yw-create-work-warning-surface) !important;
  border-color: var(--yw-create-work-warning-border) !important;
  color: var(--yw-create-work-warning-text) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-option-idle {
  background-color: var(--yw-create-work-option-bg) !important;
  color: var(--yw-create-work-option-text) !important;
  border-color: var(--yw-create-work-option-border) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-option-selected {
  background-color: var(--yw-create-work-warning-selected-bg) !important;
  color: var(--yw-create-work-warning-selected-text) !important;
  border-color: var(--yw-create-work-warning-selected-border) !important;
}

/* Age ratings are mutually exclusive, so the selected card needs a stronger
   state than a small color change. This remains visible with custom themes. */
body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-age-option.create-work-option-selected {
  border-color: #facc15 !important;
  box-shadow: 0 0 0 2px rgb(250 204 21 / 0.75), 0 14px 30px rgb(250 204 21 / 0.2) !important;
  transform: translateY(-1px);
}
body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-safety-title,
body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-safety-subtitle {
  color: var(--yw-create-work-warning-text) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-safety-description,
body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-safety-hint {
  color: var(--yw-create-work-warning-muted) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-safety-counter {
  background-color: var(--yw-create-work-label-bg) !important;
  color: var(--yw-create-work-label-text) !important;
  border-color: var(--yw-create-work-warning-border) !important;
}

body:is(.create-work-route, .draft-route)
  .site-main
  .create-work-safety-section
  .create-work-warning-icon {
  background-color: var(--yw-create-work-option-icon-bg) !important;
  color: var(--yw-create-work-option-icon-text) !important;
}

.messages-workspace .message-unread-badge {
  background-color: var(--yw-message-accent) !important;
  color: var(--yw-message-primary-button-text, #ffffff) !important;
}

/* Messages route final theme binding.
   Keep this block late: the messages page still has legacy Tailwind colors in
   JSX, so these semantic rules make Admin -> Theme settings win without
   bringing outline borders back. */
.messages-workspace,
.messages-workspace.message-page {
  background-color: var(--yw-message-bg) !important;
  color: var(--yw-message-text) !important;
}

.messages-workspace :is(.text-zinc-100, .text-zinc-200, .text-zinc-300) {
  color: var(--yw-message-text) !important;
}

.messages-workspace
  :is(.text-zinc-400, .text-zinc-500, .text-zinc-600, .text-zinc-700) {
  color: var(--yw-message-muted) !important;
}

.messages-workspace .message-sidebar-panel {
  background-color: var(--yw-message-sidebar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-thread-panel {
  background-color: var(--yw-message-conversation) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-link {
  color: var(--yw-message-muted) !important;
}

.messages-workspace .message-link:hover {
  color: var(--yw-message-text) !important;
}

.messages-workspace .message-status-pill {
  background-color: color-mix(
    in srgb,
    var(--yw-message-accent) 18%,
    transparent
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-notice,
.messages-workspace .message-start-panel,
.messages-workspace .message-list-state,
.messages-workspace .message-suggestions-panel,
.messages-workspace .message-selected-recipient,
.messages-workspace .message-empty-panel,
.messages-workspace .message-modal {
  background-color: var(--yw-message-composer) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-count-pill,
.messages-workspace .message-unread-badge {
  background-color: var(--yw-message-accent) !important;
  color: var(--yw-message-primary-button-text, #ffffff) !important;
  border: 0 !important;
}

.messages-workspace .message-suggestion-item {
  background-color: transparent !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-workspace .message-suggestion-item:hover {
  background-color: var(--yw-message-active-dialog) !important;
}

.messages-workspace .message-avatar-active,
.messages-workspace .message-avatar-idle,
.messages-workspace .message-suggestion-item .rounded-full {
  background-color: var(--yw-message-attachment) !important;
  color: var(--yw-message-text) !important;
}

.messages-workspace .message-tab-active,
.messages-workspace .message-dialog-active {
  background-color: var(--yw-message-active-dialog) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-tab-idle,
.messages-workspace .message-dialog-idle {
  background-color: color-mix(
    in srgb,
    var(--yw-message-sidebar) 78%,
    var(--yw-message-conversation)
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-tab-idle:hover,
.messages-workspace .message-dialog-idle:hover {
  background-color: color-mix(
    in srgb,
    var(--yw-message-active-dialog) 72%,
    var(--yw-message-sidebar)
  ) !important;
}

.messages-workspace .message-search-input,
.messages-workspace input.message-search-input,
.messages-workspace select,
.messages-workspace textarea {
  background-color: var(--yw-message-composer) !important;
  color: var(--yw-message-composer-text) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.messages-workspace .message-search-input::placeholder,
.messages-workspace textarea::placeholder {
  color: var(--yw-message-muted) !important;
}

.messages-workspace .message-search-input:focus,
.messages-workspace input.message-search-input:focus,
.messages-workspace select:focus,
.messages-workspace textarea:focus {
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--yw-message-accent) 36%, transparent) !important;
}

.messages-workspace .message-thread-header,
.messages-workspace .message-composer-divider,
.messages-workspace .message-composer-shell,
.messages-workspace .message-composer-shell > div,
.messages-workspace .message-composer-shell .writer-editor-dark,
.messages-workspace .message-composer-shell .writer-editor-light,
.messages-workspace .message-composer-shell .writer-editor-sepia,
.messages-workspace .message-composer-shell .tiptap,
.messages-workspace .message-composer-shell [contenteditable="true"] {
  background-color: var(--yw-message-composer) !important;
  color: var(--yw-message-composer-text) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.messages-workspace .message-thread-header {
  background-color: transparent !important;
}

.messages-workspace .message-bubble,
.messages-workspace .message-bubble-incoming,
.messages-workspace .message-bubble-outgoing {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-bubble-incoming {
  background-color: var(--yw-message-incoming) !important;
  color: var(--yw-message-incoming-text) !important;
}

.messages-workspace .message-bubble-outgoing {
  background-color: var(--yw-message-outgoing) !important;
  color: var(--yw-message-outgoing-text) !important;
}

.messages-workspace .message-bubble-content-incoming,
.messages-workspace .message-bubble-content-incoming * {
  color: var(--yw-message-incoming-text) !important;
}

.messages-workspace .message-bubble-content-outgoing,
.messages-workspace .message-bubble-content-outgoing * {
  color: var(--yw-message-outgoing-text) !important;
}

.messages-workspace .message-bubble-outgoing .message-bubble-meta,
.messages-workspace .message-bubble-meta-outgoing {
  color: color-mix(
    in srgb,
    var(--yw-message-outgoing-text) 72%,
    transparent
  ) !important;
}

.messages-workspace .message-bubble-incoming .message-bubble-meta,
.messages-workspace .message-bubble-meta-incoming,
.messages-workspace .message-muted-text {
  color: var(--yw-message-muted) !important;
}

.messages-workspace .message-primary-button {
  background-color: var(--yw-message-accent) !important;
  color: var(--yw-message-primary-button-text, #ffffff) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-primary-button:not(:disabled):hover {
  background-color: color-mix(
    in srgb,
    var(--yw-message-accent) 86%,
    var(--yw-message-text)
  ) !important;
}

.messages-workspace .message-secondary-button {
  background-color: var(--yw-message-toolbar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-secondary-button:hover {
  background-color: var(--yw-message-active-dialog) !important;
}

.messages-workspace .message-danger-button {
  background-color: color-mix(
    in srgb,
    var(--yw-state-danger, #dc2626) 34%,
    var(--yw-message-composer)
  ) !important;
  color: #fecaca !important;
  border: 0 !important;
  box-shadow: none !important;
}

.messages-workspace .message-warning-button,
.messages-workspace .message-warning-notice {
  background-color: color-mix(
    in srgb,
    var(--yw-state-warning, #f59e0b) 22%,
    var(--yw-message-composer)
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-workspace .message-danger-notice {
  background-color: color-mix(
    in srgb,
    var(--yw-state-danger, #dc2626) 22%,
    var(--yw-message-composer)
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-workspace .message-composer-shell .tiptap-toolbar-button {
  background-color: var(--yw-message-toolbar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-workspace .message-composer-shell .tiptap-toolbar-button:hover,
.messages-workspace .message-composer-shell .tiptap-toolbar-button.bg-white,
.messages-workspace
  .message-composer-shell
  .tiptap-toolbar-button.border-white {
  background-color: var(--yw-message-active-dialog) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-workspace .message-emoji-panel {
  background-color: var(--yw-message-sidebar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.35) !important;
}

.messages-workspace .message-emoji-button:hover {
  background-color: var(--yw-message-active-dialog) !important;
}

/* Messenger popup redesign. This intentionally uses dedicated classes and
   semantic message variables, so the UI no longer depends on broad Tailwind
   border/background overrides from the old messages page. */
.messages-popup-page {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in srgb, var(--yw-message-accent) 12%, transparent),
      transparent 34rem
    ),
    var(--yw-message-bg) !important;
  color: var(--yw-message-text) !important;
}

.messages-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgb(0 0 0 / 0.08), transparent 55%);
}

.messages-popup-window {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 2rem));
  height: min(84vh, 860px);
  min-width: min(720px, calc(100vw - 2rem));
  min-height: min(560px, calc(100vh - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  resize: both;
  overflow: hidden;
  background: var(--yw-message-conversation) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 24px 90px rgb(0 0 0 / 0.34) !important;
}

.messages-popup-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.message-popup-sidebar,
.messages-popup-page .message-popup-sidebar {
  min-height: 0;
  background: var(--yw-message-sidebar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.message-popup-sidebar-top {
  background: color-mix(
    in srgb,
    var(--yw-message-sidebar) 92%,
    var(--yw-message-bg)
  ) !important;
}

.message-popup-thread,
.messages-popup-page .message-popup-thread {
  min-height: 0;
  background: var(--yw-message-conversation) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.message-popup-thread-header {
  background: color-mix(
    in srgb,
    var(--yw-message-conversation) 92%,
    var(--yw-message-bg)
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: 0 1px 0
    color-mix(in srgb, var(--yw-message-border) 26%, transparent) !important;
}

.message-popup-messages {
  background:
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb, var(--yw-message-accent) 8%, transparent),
      transparent 26rem
    ),
    var(--yw-message-conversation) !important;
}

.message-popup-composer {
  background: color-mix(
    in srgb,
    var(--yw-message-conversation) 88%,
    var(--yw-message-bg)
  ) !important;
  border: 0 !important;
  box-shadow: 0 -1px 0
    color-mix(in srgb, var(--yw-message-border) 24%, transparent) !important;
}

.message-popup-input,
.messages-popup-page .message-popup-input,
.messages-popup-page select.message-popup-input,
.messages-popup-page textarea.message-popup-input {
  background: var(--yw-message-composer) !important;
  color: var(--yw-message-composer-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--yw-message-border) 30%, transparent) !important;
}

.message-popup-input::placeholder {
  color: var(--yw-message-muted) !important;
}

.message-popup-input:focus {
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--yw-message-accent) 60%, transparent) !important;
}

.message-popup-suggestions,
.message-popup-modal,
.message-popup-empty,
.message-popup-notice {
  background: var(--yw-message-composer) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.28) !important;
}

.message-popup-suggestion,
.message-popup-dialog,
.message-popup-tab,
.message-popup-action,
.message-popup-icon-button {
  background: color-mix(
    in srgb,
    var(--yw-message-sidebar) 72%,
    var(--yw-message-conversation)
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.message-popup-suggestion:hover,
.message-popup-dialog:hover,
.message-popup-tab:hover,
.message-popup-action:hover,
.message-popup-icon-button:hover {
  background: color-mix(
    in srgb,
    var(--yw-message-active-dialog) 78%,
    var(--yw-message-sidebar)
  ) !important;
}

.message-popup-dialog-active,
.message-popup-tab-active {
  background: var(--yw-message-active-dialog) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  box-shadow: inset 3px 0 0 var(--yw-message-accent) !important;
}

.message-popup-primary {
  background: var(--yw-message-accent) !important;
  color: var(--yw-message-primary-button-text, #ffffff) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.message-popup-primary:not(:disabled):hover {
  filter: brightness(1.06);
}

.message-popup-danger,
.message-popup-report {
  background: color-mix(
    in srgb,
    var(--yw-state-danger, #dc2626) 30%,
    var(--yw-message-composer)
  ) !important;
  color: #fecaca !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.message-popup-danger:not(:disabled):hover,
.message-popup-report:hover {
  background: color-mix(
    in srgb,
    var(--yw-state-danger, #dc2626) 42%,
    var(--yw-message-composer)
  ) !important;
}

.message-popup-warning-note {
  background: color-mix(
    in srgb,
    var(--yw-state-warning, #f59e0b) 22%,
    var(--yw-message-composer)
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.message-popup-danger-note {
  background: color-mix(
    in srgb,
    var(--yw-state-danger, #dc2626) 20%,
    var(--yw-message-composer)
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.message-popup-avatar {
  background: var(--yw-message-attachment) !important;
  color: var(--yw-message-text) !important;
}

.message-popup-muted,
.message-popup-preview,
.message-popup-bubble-meta {
  color: var(--yw-message-muted) !important;
}

.message-popup-status,
.message-popup-pill,
.message-popup-unread {
  background: color-mix(
    in srgb,
    var(--yw-message-accent) 20%,
    transparent
  ) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.message-popup-bubble {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.14) !important;
}

.message-popup-bubble-in {
  background: var(--yw-message-incoming) !important;
  color: var(--yw-message-incoming-text) !important;
}

.message-popup-bubble-out {
  background: var(--yw-message-outgoing) !important;
  color: var(--yw-message-outgoing-text) !important;
}

.message-popup-bubble-in .message-popup-bubble-content,
.message-popup-bubble-in .message-popup-bubble-content * {
  color: var(--yw-message-incoming-text) !important;
}

.message-popup-bubble-out .message-popup-bubble-content,
.message-popup-bubble-out .message-popup-bubble-content * {
  color: var(--yw-message-outgoing-text) !important;
}

.message-popup-modal-backdrop {
  background: rgb(0 0 0 / 0.62) !important;
}

.messages-popup-page .message-composer-shell,
.messages-popup-page .message-composer-shell > div,
.messages-popup-page .message-composer-shell .writer-editor-dark,
.messages-popup-page .message-composer-shell .writer-editor-light,
.messages-popup-page .message-composer-shell .writer-editor-sepia {
  background: var(--yw-message-composer) !important;
  color: var(--yw-message-composer-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.messages-popup-page .message-composer-shell .tiptap,
.messages-popup-page .message-composer-shell [contenteditable="true"] {
  min-height: 76px !important;
  background: var(--yw-message-composer) !important;
  color: var(--yw-message-composer-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.messages-popup-page .message-composer-shell .tiptap.ProseMirror-focused {
  box-shadow: none !important;
}

.messages-popup-page .message-composer-shell .tiptap-toolbar-button {
  background: var(--yw-message-toolbar) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.messages-popup-page .message-composer-shell .tiptap-toolbar-button:hover,
.messages-popup-page .message-composer-shell .tiptap-toolbar-button.bg-white,
.messages-popup-page
  .message-composer-shell
  .tiptap-toolbar-button.border-white {
  background: var(--yw-message-active-dialog) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-popup-page .message-composer-shell .tiptap-toolbar-button + .mx-1 {
  background: color-mix(
    in srgb,
    var(--yw-message-border) 32%,
    transparent
  ) !important;
}

.messages-popup-page .message-composer-shell .message-composer-footer,
.messages-popup-page .message-emoji-panel {
  background: var(--yw-message-composer) !important;
  color: var(--yw-message-text) !important;
  border: 0 !important;
}

.messages-popup-page .message-emoji-panel {
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.34) !important;
}

.messages-popup-page .message-emoji-button:hover {
  background: var(--yw-message-active-dialog) !important;
}

@media (max-width: 767px) {
  .messages-popup-page {
    padding: 0 !important;
  }

  .messages-popup-window {
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0 !important;
    resize: none;
  }

  .messages-popup-grid {
    grid-template-columns: 1fr;
  }
}

/* Instagram-style private messages redesign */
.messages-instagram-page {
  --mi-bg: var(--yw-message-bg, #f5f6f8);
  --mi-surface: var(--yw-message-conversation, #ffffff);
  --mi-sidebar: var(--yw-message-sidebar, #ffffff);
  --mi-surface-alt: var(--yw-message-composer, #f3f4f6);
  --mi-text: var(--yw-message-text, #111827);
  --mi-muted: var(--yw-message-muted, #6b7280);
  --mi-border: color-mix(
    in srgb,
    var(--yw-message-border, #d1d5db) 70%,
    transparent
  );
  --mi-accent: var(--yw-message-accent, #4f46e5);
  --mi-accent-text: var(--yw-message-primary-button-text, #ffffff);
  --mi-active: var(--yw-message-active-dialog, #eef2ff);
  --mi-incoming: var(--yw-message-incoming, #ffffff);
  --mi-incoming-text: var(--yw-message-incoming-text, var(--mi-text));
  --mi-outgoing: var(--yw-message-outgoing, #4f46e5);
  --mi-outgoing-text: var(--yw-message-outgoing-text, #ffffff);
  min-height: 100vh;
  background: var(--mi-bg) !important;
  color: var(--mi-text) !important;
}

.messages-instagram-page * {
  box-sizing: border-box;
}

.messages-instagram-page button,
.messages-instagram-page a,
.messages-instagram-page input,
.messages-instagram-page textarea,
.messages-instagram-page select {
  font: inherit;
}

.messages-instagram-page.is-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.messages-instagram-compact-card {
  width: min(100%, 370px);
  height: min(720px, calc(100vh - 36px));
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mi-border);
  border-radius: 18px;
  background: var(--mi-surface);
  color: var(--mi-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.messages-instagram-compact-header,
.messages-instagram-thread-header,
.messages-instagram-expanded-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--mi-border);
  background: var(--mi-surface);
  color: var(--mi-text);
}

.messages-instagram-compact-header {
  padding: 10px 12px;
}

.messages-instagram-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mi-text);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}

.messages-instagram-icon-button:hover {
  background: color-mix(in srgb, var(--mi-text) 9%, transparent);
}

.messages-instagram-avatar {
  background: color-mix(in srgb, var(--mi-accent) 17%, var(--mi-surface));
  color: var(--mi-accent);
}

.messages-instagram-muted,
.messages-instagram-preview,
.messages-instagram-bubble-meta {
  color: var(--mi-muted);
}

.messages-instagram-compact-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--mi-border);
}

.messages-instagram-search-wrap {
  position: relative;
}

.messages-instagram-search {
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--mi-surface-alt);
  color: var(--mi-text);
  outline: none;
  padding: 10px 14px;
  font-size: 14px;
}

.messages-instagram-search::placeholder,
.messages-instagram-composer-input::placeholder {
  color: color-mix(in srgb, var(--mi-muted) 70%, transparent);
}

.messages-instagram-search:focus,
.messages-instagram-composer:focus-within,
.messages-instagram-form-control:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mi-accent) 26%, transparent);
}

.messages-instagram-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--mi-border);
  border-radius: 16px;
  background: var(--mi-surface);
  padding: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.messages-instagram-suggestion,
.messages-instagram-dialog {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--mi-text);
  cursor: pointer;
}

.messages-instagram-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 12px;
}

.messages-instagram-suggestion:hover,
.messages-instagram-dialog:hover {
  background: color-mix(in srgb, var(--mi-text) 7%, transparent);
}

.messages-instagram-open-conversation {
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--mi-accent);
  color: var(--mi-accent-text);
  padding: 9px 12px;
  font-weight: 700;
  cursor: pointer;
}

.messages-instagram-compact-list,
.messages-instagram-expanded-list,
.messages-instagram-conversation-list {
  min-height: 0;
}

.messages-instagram-compact-list,
.messages-instagram-expanded-list {
  flex: 1;
  overflow-y: auto;
}

.messages-instagram-conversation-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.messages-instagram-dialog {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 10px;
  border-radius: 14px;
  text-align: left;
}

.messages-instagram-dialog.is-active {
  background: var(--mi-active);
  color: var(--mi-text);
}

.messages-instagram-unread {
  background: var(--mi-accent);
  color: var(--mi-accent-text);
}

.messages-instagram-alert,
.messages-instagram-empty-small,
.messages-instagram-empty-thread,
.messages-instagram-send-locked {
  color: var(--mi-muted);
}

.messages-instagram-alert {
  border-radius: 12px;
  background: color-mix(in srgb, var(--mi-accent) 10%, transparent);
  padding: 9px 12px;
  font-size: 13px;
}

.messages-instagram-empty-small {
  padding: 14px;
  font-size: 13px;
}

.messages-instagram-empty-thread {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.messages-instagram-compact-thread {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.messages-instagram-messages {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.messages-instagram-profile-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 10px 26px;
  text-align: center;
}

.messages-instagram-profile-link {
  background: var(--mi-surface-alt);
  color: var(--mi-text);
  text-decoration: none;
}

.messages-instagram-date-separator {
  margin: 10px auto;
  width: max-content;
  max-width: 90%;
  color: var(--mi-muted);
  font-size: 12px;
  text-align: center;
}

.messages-instagram-message-row {
  display: flex;
  margin: 8px 0;
}

.messages-instagram-message-row.mine {
  justify-content: flex-end;
}

.messages-instagram-message-row.theirs {
  justify-content: flex-start;
}

.messages-instagram-bubble {
  max-width: min(78%, 560px);
  border: 0;
  border-radius: 18px;
  padding: 9px 12px;
  overflow-wrap: anywhere;
  line-height: 1.45;
  font-size: 14px;
}

.messages-instagram-bubble.mine {
  background: var(--mi-outgoing);
  color: var(--mi-outgoing-text);
  border-bottom-right-radius: 7px;
}

.messages-instagram-bubble.theirs {
  background: var(--mi-incoming);
  color: var(--mi-incoming-text);
  border: 1px solid color-mix(in srgb, var(--mi-border) 55%, transparent);
  border-bottom-left-radius: 7px;
}

.messages-instagram-bubble-content,
.messages-instagram-bubble-content * {
  color: inherit !important;
}

.messages-instagram-bubble-content p {
  margin: 0;
}

.messages-instagram-bubble-meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 10px;
}

.messages-instagram-bubble.mine .messages-instagram-bubble-meta {
  color: color-mix(in srgb, var(--mi-outgoing-text) 72%, transparent);
}

.messages-instagram-report {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.messages-instagram-composer-wrap {
  flex-shrink: 0;
  padding: 10px 14px 14px;
  background: var(--mi-surface);
}

.messages-instagram-composer {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  background: var(--mi-surface);
  padding: 6px 7px;
  transition: box-shadow 0.15s ease;
}

.messages-instagram-composer-input {
  min-width: 0;
  flex: 1;
  max-height: 86px;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--mi-text);
  outline: none;
  padding: 8px 2px;
  line-height: 1.4;
  font-size: 14px;
}

.messages-instagram-composer-icon,
.messages-instagram-send-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.messages-instagram-composer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--mi-text);
  font-size: 20px;
}

.messages-instagram-composer-icon:hover {
  background: color-mix(in srgb, var(--mi-text) 8%, transparent);
}

.messages-instagram-send-button {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--mi-accent);
  font-weight: 800;
  font-size: 13px;
}

.messages-instagram-send-button:disabled {
  color: color-mix(in srgb, var(--mi-muted) 70%, transparent);
  cursor: default;
}

.messages-instagram-emoji-root {
  position: relative;
  flex-shrink: 0;
}

.messages-instagram-emoji-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 50;
  display: grid;
  width: 280px;
  max-width: min(280px, calc(100vw - 48px));
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--mi-border);
  border-radius: 16px;
  background: var(--mi-surface);
  padding: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

.messages-instagram-emoji-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.messages-instagram-emoji-button:hover {
  background: color-mix(in srgb, var(--mi-text) 8%, transparent);
}

.messages-instagram-page.is-expanded {
  padding: 0;
}

.messages-instagram-expanded-shell {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  height: 100vh;
  min-height: 640px;
  background: var(--mi-surface);
  color: var(--mi-text);
}

.messages-instagram-expanded-sidebar {
  min-width: 0;
  border-right: 1px solid var(--mi-border);
  background: var(--mi-sidebar);
  display: flex;
  flex-direction: column;
}

.messages-instagram-expanded-sidebar-head {
  flex-shrink: 0;
  padding: 20px 18px 14px;
  border-bottom: 1px solid var(--mi-border);
}

.messages-instagram-tab {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mi-muted);
  padding: 8px 10px;
  font-weight: 700;
  cursor: pointer;
}

.messages-instagram-tab.is-active {
  background: var(--mi-active);
  color: var(--mi-text);
}

.messages-instagram-expanded-list {
  padding: 8px 0;
}

.messages-instagram-expanded-actions {
  border-top: 1px solid var(--mi-border);
  padding: 12px 16px;
}

.messages-instagram-link-button {
  border: 0;
  background: transparent;
  color: var(--mi-accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.messages-instagram-expanded-thread {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--mi-surface);
}

.messages-instagram-expanded-topbar {
  min-height: 58px;
  padding-right: 18px;
}

.messages-instagram-thread-header {
  flex: 1;
  min-width: 0;
  padding: 8px 16px;
  border-bottom: 0;
}

.messages-instagram-expanded-messages {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.messages-instagram-mini-action {
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  background: var(--mi-surface);
  color: var(--mi-text);
  cursor: pointer;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

.messages-instagram-mini-action:hover {
  background: color-mix(in srgb, var(--mi-text) 7%, transparent);
}

.messages-instagram-mini-action.danger {
  border-color: color-mix(in srgb, #ef4444 44%, var(--mi-border));
  color: #ef4444;
}

.messages-instagram-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.45);
}

.messages-instagram-modal {
  width: min(100%, 440px);
  border: 1px solid var(--mi-border);
  border-radius: 20px;
  background: var(--mi-surface);
  color: var(--mi-text);
  padding: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.messages-instagram-form-control {
  width: 100%;
  border: 1px solid var(--mi-border);
  border-radius: 12px;
  background: var(--mi-surface-alt);
  color: var(--mi-text);
  outline: none;
  padding: 11px 12px;
}

.messages-instagram-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 14px;
  background: var(--mi-surface-alt);
  padding: 12px;
}

@media (max-width: 760px) {
  .messages-instagram-page.is-compact {
    padding: 0;
  }

  .messages-instagram-compact-card {
    width: 100%;
    height: 100vh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .messages-instagram-expanded-shell {
    grid-template-columns: 1fr;
  }

  .messages-instagram-expanded-sidebar {
    display: none;
  }

  .messages-instagram-expanded-topbar {
    padding-right: 10px;
  }

  .messages-instagram-bubble {
    max-width: 86%;
  }
}

/* Instagram Direct polish: right-side overlay, cleaner controls, floating trigger */
.messages-instagram-page.is-floating {
  position: fixed;
  z-index: 95;
  inset: auto 18px 18px auto;
  min-height: 0;
  background: transparent !important;
  pointer-events: none;
}

.messages-instagram-page.is-floating > * {
  pointer-events: auto;
}

.messages-instagram-page.is-page.is-compact {
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 100vh;
  padding: 24px;
  background: transparent !important;
}

.messages-instagram-page.is-floating.is-expanded {
  inset: 0;
  background: var(--mi-bg) !important;
}

.messages-instagram-page.is-floating.is-compact
  .messages-instagram-compact-card,
.messages-instagram-page.is-page.is-compact .messages-instagram-compact-card {
  width: min(370px, calc(100vw - 32px));
  height: min(610px, calc(100vh - 36px));
  min-height: 420px;
  border-radius: 18px;
}

.messages-instagram-compact-card {
  border-color: color-mix(in srgb, var(--mi-border) 78%, transparent);
}

.messages-instagram-icon-button {
  width: 38px;
  height: 38px;
}

.messages-instagram-icon-button svg {
  width: 20px;
  height: 20px;
}

.messages-instagram-expanded-topbar .messages-instagram-icon-button svg,
.messages-instagram-compact-header .messages-instagram-icon-button svg {
  width: 22px;
  height: 22px;
}

.messages-instagram-compact-search {
  padding: 12px;
}

.messages-instagram-search,
.messages-instagram-composer,
.messages-instagram-form-control {
  border: 1px solid
    color-mix(in srgb, var(--mi-border) 82%, var(--mi-accent) 18%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mi-text) 3%, transparent);
}

.messages-instagram-search:focus,
.messages-instagram-composer:focus-within,
.messages-instagram-form-control:focus {
  border-color: color-mix(in srgb, var(--mi-accent) 72%, var(--mi-border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--mi-accent) 40%, transparent),
    0 0 0 3px color-mix(in srgb, var(--mi-accent) 16%, transparent);
}

.messages-instagram-compact-actions,
.messages-instagram-compact-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 10px;
}

.messages-instagram-compact-tabs {
  padding-top: 0;
}

.messages-instagram-mini-action,
.messages-instagram-tab {
  border-radius: 12px;
  min-height: 34px;
  font-size: 12px;
  line-height: 1.15;
}

.messages-instagram-mini-action:disabled {
  opacity: 0.45;
  cursor: default;
}

.messages-instagram-floating-compose {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--mi-surface);
  color: var(--mi-text);
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}

.messages-instagram-floating-compose svg {
  width: 23px;
  height: 23px;
}

.messages-instagram-new-panel {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.messages-instagram-new-recipient-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mi-border);
}

.messages-instagram-new-label {
  font-weight: 800;
  font-size: 14px;
}

.messages-instagram-new-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.messages-instagram-new-section-title {
  padding: 14px 16px 4px;
  color: var(--mi-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.messages-instagram-expanded-shell {
  background: var(--mi-bg);
}

.messages-instagram-page.is-floating.is-expanded
  .messages-instagram-expanded-shell {
  height: 100vh;
}

.messages-instagram-expanded-thread {
  background: var(--mi-surface);
}

.messages-floating-trigger {
  position: fixed;
  right: 5px;
  bottom: 144px;
  z-index: 41;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--site-border);
  border-radius: 999px;
  background: var(--site-surface);
  color: var(--site-foreground);
  padding: 0 18px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.16s ease,
    background-color 0.16s ease;
}

.messages-floating-trigger:hover {
  transform: translateY(-2px);
  background: var(--site-surface-alt);
}

.messages-floating-trigger svg {
  width: 23px;
  height: 23px;
}

@media (max-width: 639px) {
  .messages-floating-trigger {
    right: 18px;
    bottom: 144px;
    width: 54px;
    height: 54px;
    min-height: 54px;
    justify-content: center;
    padding: 0;
  }

  .messages-floating-trigger span {
    display: none;
  }

  .messages-instagram-page.is-floating.is-compact {
    inset: 0;
    background: transparent !important;
  }

  .messages-instagram-page.is-floating.is-compact
    .messages-instagram-compact-card,
  .messages-instagram-page.is-page.is-compact .messages-instagram-compact-card {
    width: 100%;
    height: 100vh;
    min-height: 0;
    border-radius: 0;
  }

  .messages-instagram-page.is-page.is-compact {
    padding: 0;
  }
}
.messages-instagram-compact-card {
  position: relative;
}

/* Instagram Direct final polish */
.messages-instagram-page {
  --mi-window: var(--yw-message-window, var(--mi-surface));
  --mi-header: var(--yw-message-header, var(--mi-surface));
  --mi-input-bg: var(--yw-message-input-bg, var(--mi-surface));
  --mi-input-text: var(--yw-message-input-text, var(--mi-text));
  --mi-input-placeholder: var(--yw-message-input-placeholder, var(--mi-muted));
  --mi-input-border: color-mix(
    in srgb,
    var(--yw-message-input-border, var(--mi-border)) 84%,
    var(--mi-accent) 16%
  );
  --mi-icon-bg: var(--yw-message-icon-bg, transparent);
  --mi-icon-text: var(--yw-message-icon-text, var(--mi-text));
  --mi-icon-hover: var(--yw-message-icon-hover, var(--mi-active));
  --mi-action-bg: var(--yw-message-action-bg, var(--mi-surface));
  --mi-action-text: var(--yw-message-action-text, var(--mi-text));
  --mi-action-border: var(--yw-message-action-border, var(--mi-border));
  --mi-danger-bg: var(--yw-message-danger-bg, transparent);
  --mi-danger-text: var(--yw-message-danger-text, #ef4444);
  --mi-danger-border: var(--yw-message-danger-border, #ef4444);
  --mi-floating-compose-bg: var(
    --yw-message-floating-compose-bg,
    var(--mi-surface)
  );
  --mi-floating-compose-text: var(--yw-message-floating-compose-text, var(--mi-text));
  --mi-emoji-bg: var(--yw-message-emoji-bg, var(--mi-surface));
}

.messages-instagram-compact-card,
.messages-instagram-expanded-thread,
.messages-instagram-expanded-shell {
  background: var(--mi-window) !important;
}

.messages-instagram-compact-header,
.messages-instagram-thread-header,
.messages-instagram-expanded-topbar {
  background: var(--mi-header) !important;
}

.messages-instagram-compact-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px 8px;
}

.messages-instagram-action-icon {
  display: inline-flex;
  min-width: 0;
  width: 100%;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--mi-action-border) 72%, transparent);
  border-radius: 12px;
  background: var(--mi-action-bg);
  color: var(--mi-action-text);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}

.messages-instagram-action-icon:hover:not(:disabled) {
  background: color-mix(in srgb, var(--mi-action-text) 8%, var(--mi-action-bg));
  border-color: color-mix(in srgb, var(--mi-accent) 42%, var(--mi-action-border));
  transform: translateY(-1px);
}

.messages-instagram-action-icon:disabled {
  opacity: 0.38;
  cursor: default;
}

.messages-instagram-action-icon.danger {
  background: var(--mi-danger-bg);
  color: var(--mi-danger-text);
  border-color: color-mix(in srgb, var(--mi-danger-border) 70%, transparent);
}

.messages-instagram-action-icon svg {
  width: 20px;
  height: 20px;
}

.messages-instagram-thread-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.messages-instagram-thread-actions .messages-instagram-action-icon {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 999px;
}

.messages-instagram-icon-button {
  background: var(--mi-icon-bg);
  color: var(--mi-icon-text);
}

.messages-instagram-icon-button:hover {
  background: var(--mi-icon-hover);
}

.messages-instagram-search,
.messages-instagram-composer,
.messages-instagram-form-control {
  border-color: var(--mi-input-border) !important;
}

.messages-instagram-search,
.messages-instagram-form-control {
  background: var(--mi-input-bg) !important;
  color: var(--mi-input-text) !important;
}

.messages-instagram-search::placeholder,
.messages-instagram-composer-input::placeholder {
  color: var(--mi-input-placeholder) !important;
}

.messages-instagram-composer-wrap {
  background: var(--mi-window) !important;
}

.messages-instagram-composer {
  align-items: center;
  min-height: 46px;
  border-radius: 999px;
  background: var(--mi-input-bg) !important;
  padding: 5px 8px;
  overflow: visible;
}

.messages-instagram-composer-input {
  display: block;
  height: 28px;
  min-height: 28px;
  max-height: 86px;
  overflow-y: auto;
  appearance: none;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mi-input-text) !important;
  outline: 0 !important;
  padding: 4px 2px;
  line-height: 20px;
}

.messages-instagram-composer-input::-webkit-resizer {
  display: none;
}

.messages-instagram-composer-icon {
  width: 34px;
  height: 34px;
  color: var(--mi-icon-text);
}

.messages-instagram-composer-icon svg {
  width: 22px;
  height: 22px;
}

.messages-instagram-send-button {
  color: var(--mi-accent);
  white-space: nowrap;
}

.messages-instagram-emoji-panel {
  background: var(--mi-emoji-bg) !important;
}

.messages-instagram-floating-compose {
  background: var(--mi-floating-compose-bg) !important;
  color: var(--mi-floating-compose-text) !important;
}

.messages-instagram-expanded-sidebar-head .messages-instagram-tab {
  min-height: 38px;
}

.messages-instagram-expanded-topbar {
  gap: 10px;
  padding-right: 14px;
}

.messages-instagram-expanded-topbar > .flex:last-child {
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .messages-instagram-expanded-topbar {
    min-height: auto;
    flex-wrap: nowrap;
    align-items: center;
    padding: 8px 10px;
  }

  .messages-instagram-thread-header {
    min-width: 0;
    padding: 6px 8px;
  }

  .messages-instagram-thread-actions {
    gap: 6px;
  }

  .messages-instagram-thread-actions .messages-instagram-action-icon,
  .messages-instagram-expanded-topbar .messages-instagram-icon-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }
}

@media (max-width: 639px) {
  .messages-instagram-page.is-floating.is-compact {
    inset: auto 8px 10px 8px;
    background: transparent !important;
  }

  .messages-instagram-page.is-floating.is-compact
    .messages-instagram-compact-card,
  .messages-instagram-page.is-page.is-compact .messages-instagram-compact-card {
    width: auto;
    height: min(650px, calc(100vh - 86px));
    min-height: min(560px, calc(100vh - 86px));
    border: 1px solid var(--mi-border);
    border-radius: 14px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  }

  .messages-instagram-page.is-page.is-compact {
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
  }

  .messages-instagram-compact-actions {
    padding-top: 8px;
  }
}


/* Messages mobile/header polish patch */
.messages-instagram-page.is-floating.is-compact
  .messages-instagram-compact-card,
.messages-instagram-page.is-page.is-compact .messages-instagram-compact-card {
  max-width: calc(100vw - 24px);
}

.messages-instagram-compact-header .messages-instagram-icon-button svg,
.messages-instagram-expanded-topbar .messages-instagram-icon-button svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.1;
}

.messages-floating-trigger span {
  display: inline-flex;
}

@media (max-width: 760px) {
  .messages-instagram-page.is-floating.is-compact {
    inset: auto 10px 12px auto;
    background: transparent !important;
  }

  .messages-instagram-page.is-floating.is-compact
    .messages-instagram-compact-card,
  .messages-instagram-page.is-page.is-compact .messages-instagram-compact-card {
    width: min(390px, calc(100vw - 20px));
    height: min(650px, calc(100vh - 28px));
    min-height: min(560px, calc(100vh - 28px));
    border: 1px solid var(--mi-border);
    border-radius: 14px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
  }

  .messages-instagram-page.is-page.is-compact {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px;
  }
}

@media (max-width: 430px) {
  .messages-instagram-page.is-floating.is-compact {
    inset: auto 8px 10px 8px;
  }

  .messages-instagram-page.is-floating.is-compact
    .messages-instagram-compact-card,
  .messages-instagram-page.is-page.is-compact .messages-instagram-compact-card {
    width: calc(100vw - 16px);
  }
}

/* Header/favicon/messages small fix */
@media (max-width: 639px) {
  .messages-floating-trigger {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 0 !important;
    gap: 0;
  }

  .messages-floating-trigger .messages-floating-trigger-label,
  .messages-floating-trigger span {
    display: none !important;
  }

  .messages-floating-trigger svg {
    width: 24px;
    height: 24px;
  }
}


/* Messages mobile expanded view fix */
.messages-instagram-mobile-back {
  display: none;
}

@media (max-width: 760px) {
  .messages-instagram-page.is-expanded,
  .messages-instagram-page.is-floating.is-expanded {
    min-height: 100vh;
    background: var(--mi-bg) !important;
  }

  .messages-instagram-expanded-shell {
    grid-template-columns: 1fr !important;
    height: 100vh;
    min-height: 0;
  }

  .messages-instagram-expanded-shell.is-list-mode .messages-instagram-expanded-sidebar {
    display: flex !important;
    width: 100%;
    min-height: 0;
    border-right: 0;
  }

  .messages-instagram-expanded-shell.is-list-mode .messages-instagram-expanded-thread {
    display: none !important;
  }

  .messages-instagram-expanded-shell.is-thread-mode .messages-instagram-expanded-sidebar {
    display: none !important;
  }

  .messages-instagram-expanded-shell.is-thread-mode .messages-instagram-expanded-thread {
    display: flex !important;
    width: 100%;
    min-height: 0;
  }

  .messages-instagram-mobile-back {
    display: inline-flex;
    flex-shrink: 0;
  }

  .messages-instagram-expanded-topbar {
    min-height: 58px;
    border-bottom: 1px solid var(--mi-border);
  }

  .messages-instagram-expanded-messages,
  .messages-instagram-messages {
    min-height: 0;
  }
}

/* CMS button widget hover controls */
.cms-button-link:hover {
  background-color: var(--cms-button-hover-bg) !important;
  color: var(--cms-button-hover-text) !important;
  border-color: var(--cms-button-hover-border) !important;
  opacity: var(--cms-button-hover-opacity, 1);
  box-shadow: var(--cms-button-hover-shadow, none);
}

/* Header / editor layer safety net.
   The writer editor has sticky/fixed panels with Tailwind z-50. Header dropdowns,
   notification dropdowns and mobile menus must always stay above the editor. */
:root {
  --yw-layer-page: 0;
  --yw-layer-editor-sticky: 200;
  --yw-layer-header: 9000;
  --yw-layer-header-dropdown: 9100;
  --yw-layer-overlay: 9200;
  --yw-layer-modal: 9300;
  --yw-layer-lightbox: 9400;
}

.site-public-header {
  position: relative;
  z-index: var(--yw-layer-header);
  isolation: isolate;
  overflow: visible !important;
}

.site-public-header > header,
.site-public-header header {
  z-index: var(--yw-layer-header) !important;
  overflow: visible !important;
}

.site-public-header nav,
.site-public-header [role="navigation"],
.site-public-header [aria-label*="navigation" i],
.site-public-header [aria-label*="menu" i],
.site-public-header [aria-label*="меню" i] {
  overflow: visible !important;
}

.site-public-header .absolute,
.site-public-header .fixed,
.site-public-header [class*="z-40"],
.site-public-header [class*="z-50"],
.site-public-header [class*="z-["],
.site-public-header [data-radix-popper-content-wrapper] {
  z-index: var(--yw-layer-header-dropdown) !important;
}

.site-public-header [role="dialog"],
.site-public-header [role="menu"],
.site-public-header [aria-modal="true"] {
  z-index: var(--yw-layer-overlay) !important;
}

.writer-editor-route .site-main {
  position: relative;
  z-index: var(--yw-layer-page);
}

.writer-editor-route .site-main .sticky.z-50,
.writer-editor-route .site-main .sticky[class*="z-50"],
.writer-editor-route .site-main .sticky[class*="z-[50"],
.writer-editor-route .site-main .fixed.z-50,
.writer-editor-route .site-main .fixed[class*="z-50"],
.writer-editor-route .site-main .fixed[class*="z-[50"] {
  z-index: var(--yw-layer-editor-sticky) !important;
}

.writer-editor-route .site-main .fixed[class*="z-[70"],
.writer-editor-route .site-main .fixed[class*="z-[75"] {
  z-index: var(--yw-layer-modal) !important;
}

.writer-editor-route .site-main .fixed[class*="z-[80"] {
  z-index: var(--yw-layer-lightbox) !important;
}

@media (max-width: 767px) {
  .site-public-header {
    z-index: var(--yw-layer-header);
  }

  .site-public-header .absolute,
  .site-public-header .fixed,
  .site-public-header [class*="z-40"],
  .site-public-header [class*="z-50"],
  .site-public-header [class*="z-["] {
    z-index: var(--yw-layer-header-dropdown) !important;
  }
}

/* Reader floating controls should not collide with the global public widgets. */
body.reader-active-route .public-scroll-top-button,
body.reader-route .public-scroll-top-button {
  right: 16px !important;
  bottom: 64px !important;
  z-index: 54 !important;
}

body.reader-active-route .reader-floating-actions {
  right: 16px !important;
  bottom: 128px !important;
  z-index: 60 !important;
  max-width: calc(100vw - 32px);
}

body.reader-active-route .messages-floating-trigger,
body.reader-route .messages-floating-trigger {
  right: 16px !important;
  bottom: 192px !important;
  z-index: 56 !important;
}

body.reader-active-route .reader-progress-dock {
  z-index: 50 !important;
}

@media (max-width: 639px) {
  body.reader-active-route .public-scroll-top-button,
  body.reader-route .public-scroll-top-button {
    right: 14px !important;
    bottom: 58px !important;
  }

  body.reader-active-route .reader-floating-actions {
    right: 14px !important;
    bottom: 116px !important;
  }

  body.reader-active-route .messages-floating-trigger,
  body.reader-route .messages-floating-trigger {
    right: 14px !important;
    bottom: 178px !important;
  }

  body.reader-active-route .reader-floating-actions button {
    min-width: 52px;
    min-height: 52px;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
}

/* Messages page fixed border variables */
html.messages-route,
body.messages-route,
body.messages-route .yw-dashboard-shell-precision,
body.messages-route .yw-messages-page,
body.messages-route .yw-messages-page * {
  --yw-border: #252f3a !important;
  --yw-border-strong: #252f3a !important;
  --yw-dashboard-border: #252f3a !important;
  --yw-card-border: #252f3a !important;
  --yw-route-border: #252f3a !important;
  --yw-route-card-border: #252f3a !important;
  --site-border: #252f3a !important;
  --yw-message-border: #252f3a !important;
  --yw-messages-border: #252f3a !important;
  --yw-messages-card-border: #252f3a !important;
}

body.messages-route .yw-messages-page .yw-card,
body.messages-route .yw-messages-page .yw-stat-card,
body.messages-route .yw-messages-page .yw-dialog-list,
body.messages-route .yw-messages-page .yw-chat-panel,
body.messages-route .yw-messages-page .yw-message-side-panel,
body.messages-route .yw-messages-page .yw-message-profile-card,
body.messages-route .yw-messages-page .yw-chat-head,
body.messages-route .yw-messages-page .yw-chat-compose,
body.messages-route .yw-messages-page .yw-search-input,
body.messages-route .yw-messages-page .messages-instagram-composer,
body.messages-route .yw-messages-page .messages-instagram-composer-icon {
  border-color: #252f3a !important;
  outline: 0 !important;
  box-shadow: none !important;
}