:root {
  --ws-ui-panel-border: 1px solid var(--ws-color-border);
  --ws-ui-panel-bg: var(--ws-card-gradient);
  --ws-ui-panel-bg-soft:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ws-bg-surface) 90%, transparent) 0%,
      color-mix(in srgb, var(--ws-bg-surface-raised) 96%, var(--ws-bg-page) 4%) 100%
    );
  --ws-ui-overlay-bg: color-mix(in srgb, var(--ws-color-overlay) 92%, transparent);
  --ws-ui-chip-bg: color-mix(in srgb, var(--ws-bg-surface-muted) 72%, var(--ws-bg-card));
  --ws-ui-chip-bg-strong: color-mix(in srgb, var(--ws-accent) 14%, var(--ws-bg-card));
  --ws-ui-chip-border: color-mix(in srgb, var(--ws-border-subtle) 84%, transparent);
  --ws-ui-chip-border-strong: color-mix(in srgb, var(--ws-accent) 42%, transparent);
  --ws-ui-field-bg: var(--ws-bg-input);
  --ws-ui-field-bg-hover: color-mix(in srgb, var(--ws-bg-input) 82%, var(--ws-accent-soft));
  --ws-ui-field-bg-focus: color-mix(in srgb, var(--ws-accent) 10%, var(--ws-bg-input));
}

.button,
.back-link,
.download-btn,
.filter-chip,
.profile-action-btn,
.profile-inline-link,
.works-modal__locale-button,
.works-modal__close,
.site-nav__link,
.site-nav__icon-button,
.site-nav__menu-button,
.site-nav__join,
.site-nav__drawer-link,
.site-nav__drawer-choice,
.site-nav__dropdown-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-space-2);
  transition: var(--ws-transition-standard);
}

.button,
.back-link,
.download-btn {
  min-height: var(--ws-control-height);
  padding: var(--ws-space-3) var(--ws-space-5);
}

.button__icon,
.profile-action-btn__icon,
.works-modal__close-icon,
.profile-inline-link__icon {
  flex-shrink: 0;
  font-size: 0.95em;
  line-height: 1;
}

.button__label,
.profile-action-btn__label {
  min-width: 0;
}

.site-nav__drawer .site-nav__drawer-link,
.site-nav__drawer .site-nav__drawer-choice {
  display: flex;
}

.site-nav__drawer .site-nav__drawer-link--stacked {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.button--large {
  min-height: calc(var(--ws-control-height) + 0.45rem);
  padding: calc(var(--ws-space-3) + 0.08rem) calc(var(--ws-space-5) + 0.12rem);
}

.button--icon-only {
  width: var(--ws-icon-button-size);
  min-width: var(--ws-icon-button-size);
  min-height: var(--ws-icon-button-size);
  padding: 0;
  border-radius: var(--ws-radius-pill);
}

.button.is-disabled,
.button[aria-disabled='true'] {
  opacity: 1;
  pointer-events: none;
}

.button:focus-visible,
.back-link:focus-visible,
.download-btn:focus-visible,
.filter-chip:focus-visible,
.profile-action-btn:focus-visible,
.profile-inline-link:focus-visible,
.works-modal__locale-button:focus-visible,
.works-modal__close:focus-visible,
.site-nav__link:focus-visible,
.site-nav__icon-button:focus-visible,
.site-nav__menu-button:focus-visible,
.site-nav__join:focus-visible,
.site-nav__drawer-link:focus-visible,
.site-nav__drawer-choice:focus-visible,
.site-nav__dropdown-item:focus-visible {
  outline: none;
  box-shadow: var(--ws-focus-ring-shadow);
}

.button--primary,
.download-btn,
.profile-action-btn.is-primary,
.site-nav__join {
  box-shadow: var(--ws-shadow-button);
}

.button--primary:hover,
.button--primary:focus-visible,
.download-btn:hover,
.download-btn:focus-visible,
.profile-action-btn.is-primary:hover,
.site-nav__join:hover,
.site-nav__join:focus-visible {
  box-shadow: var(--ws-shadow-button-hover);
}

.button--success {
  border-color: color-mix(in srgb, var(--ws-color-success) 48%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ws-color-success) 78%, #0d5a35 22%),
      color-mix(in srgb, var(--ws-color-success) 62%, #0a3320 38%)
    );
  color: #f5fff8;
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--ws-color-success) 22%, transparent);
}

.button--success:hover,
.button--success:focus-visible {
  box-shadow:
    0 16px 36px color-mix(in srgb, var(--ws-color-success) 28%, transparent);
  filter: brightness(1.04);
}

.button--secondary,
.button--ghost,
.back-link,
.filter-chip,
.profile-action-btn.is-ghost,
.profile-inline-link,
.works-modal__locale-button,
.works-modal__close {
  border-color: var(--ws-ui-chip-border);
  background: var(--ws-ui-chip-bg);
  color: var(--ws-color-text-primary);
}

.button--secondary {
  border-color: color-mix(in srgb, var(--ws-color-primary) 24%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ws-color-primary) 16%, transparent),
      color-mix(in srgb, var(--ws-color-surface) 88%, transparent)
    );
}

.button--secondary:hover,
.button--secondary:focus-visible,
.button--ghost:hover,
.button--ghost:focus-visible,
.back-link:hover,
.back-link:focus-visible,
.filter-chip:hover,
.filter-chip:focus-visible,
.filter-chip.is-active,
.profile-action-btn.is-ghost:hover,
.profile-inline-link:hover,
.profile-inline-link:focus-visible,
.profile-inline-link.is-copied,
.works-modal__locale-button:hover,
.works-modal__locale-button:focus-visible,
.works-modal__locale-button.is-active,
.works-modal__close:hover,
.works-modal__close:focus-visible,
.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.is-active,
.site-nav__link[aria-current='page'],
.site-nav__icon-button:hover,
.site-nav__icon-button:focus-visible,
.site-nav__menu-button:hover,
.site-nav__menu-button:focus-visible,
.site-nav__drawer-link:hover,
.site-nav__drawer-link:focus-visible,
.site-nav__drawer-link.is-active,
.site-nav__drawer-link[aria-current='page'],
.site-nav__drawer-choice:hover,
.site-nav__drawer-choice:focus-visible,
.site-nav__dropdown-item:hover,
.site-nav__dropdown-item:focus-visible {
  border-color: var(--ws-ui-chip-border-strong);
  background: var(--ws-ui-chip-bg-strong);
}

.button--danger {
  border-color: color-mix(in srgb, var(--ws-color-danger) 44%, transparent);
  background: color-mix(in srgb, var(--ws-color-danger) 16%, transparent);
  color: color-mix(in srgb, var(--ws-color-danger) 72%, var(--ws-text-primary));
}

.button--danger:hover,
.button--danger:focus-visible {
  border-color: color-mix(in srgb, var(--ws-color-danger) 58%, transparent);
  background: color-mix(in srgb, var(--ws-color-danger) 24%, transparent);
}

.badge-chip,
.hero-pill,
.profile-badge,
.profile-count-badge,
.profile-chip,
.profile-status {
  min-height: var(--ws-chip-height);
  border-radius: var(--ws-radius-pill);
  border-color: var(--ws-ui-chip-border);
}

.works-toolbar,
.works-detail__figure,
.profile-loading,
.profile-error,
.profile-hero,
.profile-panel,
.profile-list-card,
.profile-contact-card,
.profile-work-card,
.profile-spotlight,
.profile-kpi-card,
.profile-info-card,
.profile-info-entry--fact,
.studio-admin-footer,
.studio-admin-footer__inner {
  border-color: var(--ws-color-border);
}

.works-toolbar,
.profile-loading,
.profile-error,
.profile-hero,
.profile-panel,
.profile-list-card,
.profile-contact-card,
.profile-work-card,
.profile-spotlight,
.profile-kpi-card,
.profile-info-card,
.profile-info-entry--fact {
  box-shadow: var(--ws-shadow-card);
}

.works-toolbar,
.profile-loading,
.profile-error {
  padding: var(--ws-card-padding);
  border-radius: var(--ws-radius-lg);
  background: var(--ws-ui-panel-bg-soft);
}

.profile-hero,
.profile-panel {
  border-radius: var(--ws-radius-lg);
  background: var(--ws-ui-panel-bg);
}

.profile-list-card,
.profile-contact-card,
.profile-work-card,
.profile-spotlight,
.profile-kpi-card,
.profile-info-card,
.profile-info-entry--fact {
  background: color-mix(in srgb, var(--ws-color-surface) 86%, transparent);
}

.profile-inline-link,
.works-modal__locale-button,
.profile-action-btn,
.works-modal__close {
  min-height: var(--ws-control-height-sm);
}

.profile-action-btn,
.profile-inline-link,
.works-modal__locale-button {
  padding-inline: var(--ws-space-4);
}

.profile-action-btn {
  gap: var(--ws-space-2);
}

.profile-action-btn.is-success {
  border-color: color-mix(in srgb, var(--ws-color-success) 46%, transparent);
  background: color-mix(in srgb, var(--ws-color-success) 18%, transparent);
  color: #f4fff8;
}

.profile-action-btn.is-success:hover,
.profile-action-btn.is-success:focus-visible {
  border-color: color-mix(in srgb, var(--ws-color-success) 58%, transparent);
  background: color-mix(in srgb, var(--ws-color-success) 26%, transparent);
}

.modal,
.works-modal__backdrop {
  background-color: var(--ws-ui-overlay-bg);
}

.modal-content,
.works-modal__panel {
  border-color: var(--ws-color-border);
  border-radius: var(--ws-radius-xl);
  box-shadow: var(--ws-shadow-modal);
}

.modal-content {
  padding: var(--ws-modal-padding);
  background: var(--ws-ui-panel-bg);
}

.works-modal {
  z-index: var(--ws-z-modal);
}

.works-modal__backdrop {
  backdrop-filter: blur(var(--ws-blur-overlay));
}

.works-modal__panel {
  max-height: var(--ws-modal-max-height);
  background: var(--ws-ui-panel-bg);
}

.works-modal__header {
  border-bottom-color: var(--ws-color-border);
  background: color-mix(in srgb, var(--ws-color-bg) 88%, transparent);
  backdrop-filter: blur(var(--ws-blur-glass));
}

.works-modal__content {
  padding: var(--ws-modal-padding);
}

.works-modal__close {
  width: var(--ws-icon-button-size);
  min-width: var(--ws-icon-button-size);
  padding: 0;
}

.works-modal__kicker,
.profile-role,
.profile-inline-link__label {
  color: var(--ws-accent-text);
}

.profile-name,
.profile-section-heading,
.profile-list-title,
.profile-work-title,
.profile-contact-value,
.profile-document-title,
.profile-kpi-value,
.profile-stat-value,
.profile-meta-value,
.profile-info-card__title,
.profile-info-entry--detail strong,
.profile-info-label,
.profile-info-paragraph-label,
.profile-feed-tab,
.profile-social-stat strong {
  color: var(--ws-text-primary);
}

.profile-handle,
.profile-inline-link,
.profile-count-badge,
.profile-chip,
.profile-badge,
.profile-status {
  background: var(--ws-ui-chip-bg);
  border-color: var(--ws-ui-chip-border);
  color: var(--ws-text-secondary);
}

.profile-tagline,
.profile-bio,
.profile-list-body,
.profile-work-copy,
.profile-contact-label,
.profile-work-meta,
.profile-document-date,
.profile-document-summary,
.profile-content-date,
.profile-kpi-label,
.profile-stat-label,
.profile-meta-label,
.profile-info-entry,
.profile-info-paragraph,
.profile-info-value,
.profile-story__title,
.profile-empty-state,
.profile-social-stat span,
.works-meta-line,
.works-detail__caption {
  color: var(--ws-text-muted);
}

.profile-loading,
.profile-error,
.works-translation-note[data-state='pending'] {
  color: var(--ws-color-text-muted);
}

.works-translation-note {
  border-radius: var(--ws-radius-md);
}

.works-translation-note[data-state='failed'],
.works-translation-note[data-state='unavailable'] {
  border-color: color-mix(in srgb, var(--ws-color-warning) 32%, transparent);
  background: color-mix(in srgb, var(--ws-color-warning) 12%, transparent);
  color: color-mix(in srgb, var(--ws-color-warning) 24%, #fff0cf 76%);
}

.works-translation-note[data-state='machine_translated'] {
  border-color: color-mix(in srgb, var(--ws-color-primary) 24%, transparent);
  background: color-mix(in srgb, var(--ws-color-primary) 12%, transparent);
  color: color-mix(in srgb, var(--ws-color-primary) 22%, #f7efff 78%);
}

.studio-admin-page {
  background: var(--ws-color-bg);
  color: var(--ws-color-text-primary);
}

.studio-admin-main {
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--ws-color-primary) 16%, transparent) 0%, transparent 34%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ws-color-bg) 78%, #06070b 22%) 0%,
      color-mix(in srgb, var(--ws-color-bg) 88%, #050507 12%) 100%
    );
}

.studio-admin-footer {
  border-top: 1px solid var(--ws-color-border);
  background: var(--ws-ui-panel-bg-soft);
}

.studio-admin-footer__copy,
.studio-admin-footer__links a {
  color: var(--ws-color-text-muted);
}

.studio-admin-footer__links a:hover,
.studio-admin-footer__links a:focus-visible {
  color: var(--ws-color-primary);
}

#studio-react-root {
  --studio-bg: var(--ws-bg-page);
  --studio-panel: var(--ws-bg-surface);
  --studio-panel-strong: var(--ws-bg-surface-raised);
  --studio-panel-soft: var(--ws-bg-surface-muted);
  --studio-border: var(--ws-border-subtle);
  --studio-text: var(--ws-text-primary);
  --studio-muted: var(--ws-text-muted);
  --studio-accent: var(--ws-accent);
  --studio-accent-strong: var(--ws-accent-hover);
  --studio-danger: var(--ws-color-danger);
  --studio-success: var(--ws-color-success);
  --studio-shadow: var(--ws-shadow-popover);
  --ws-workspace-panel-bg: var(--ws-bg-card);
  --ws-workspace-panel-bg-hover: var(--ws-bg-card-hover);
  --ws-workspace-panel-bg-muted: var(--ws-bg-surface-muted);
  --ws-workspace-glass-bg: var(--ws-glass-bg);
  --ws-workspace-border: var(--ws-border-subtle);
  --ws-workspace-border-strong: var(--ws-border-strong);
}

#studio-react-root .studio-shell,
#studio-react-root .studio-auth-card,
#studio-react-root .panel-card,
#studio-react-root .modal-card,
#studio-react-root .account-editor-dialog,
#studio-react-root .account-section-dialog,
#studio-react-root .account-self-service-card,
#studio-react-root .manager-item,
#studio-react-root .nav-item {
  border-color: var(--studio-border);
}

#studio-react-root .studio-auth-card,
#studio-react-root .panel-card,
#studio-react-root .modal-card,
#studio-react-root .account-editor-dialog,
#studio-react-root .account-section-dialog,
#studio-react-root .account-self-service-card,
#studio-react-root .manager-item {
  border-radius: var(--ws-radius-lg);
  background: var(--ws-ui-panel-bg);
  box-shadow: var(--ws-shadow-card);
}

#studio-react-root .studio-shell {
  border-radius: var(--ws-radius-xl);
  box-shadow: var(--ws-shadow-modal);
}

#studio-react-root .studio-sidebar,
#studio-react-root .account-editor-dialog__footer,
#studio-react-root .account-section-dialog__footer {
  background: color-mix(in srgb, var(--studio-panel-strong) 92%, transparent);
}

#studio-react-root .button,
#studio-react-root .segmented-tabs__item,
#studio-react-root .chip,
#studio-react-root .checkbox-pill,
#studio-react-root .notice-chip,
#studio-react-root .status-pill,
#studio-react-root .icon-button,
#studio-react-root .output-path-chip,
#studio-react-root .suggestion-pill {
  border-color: var(--studio-border);
  background: var(--ws-ui-chip-bg);
  color: var(--studio-text);
  transition: var(--ws-transition-standard);
}

#studio-react-root .button,
#studio-react-root .segmented-tabs__item {
  min-height: var(--ws-control-height);
  padding: var(--ws-space-3) var(--ws-space-4);
  border-radius: var(--ws-radius-md);
}

#studio-react-root .button--small {
  min-height: var(--ws-control-height-sm);
  padding: calc(var(--ws-space-2) + 0.02rem) var(--ws-space-3);
  border-radius: var(--ws-radius-sm);
}

#studio-react-root .button--large {
  min-height: calc(var(--ws-control-height) + 0.45rem);
  padding: calc(var(--ws-space-3) + 0.08rem) calc(var(--ws-space-5) + 0.12rem);
}

#studio-react-root .chip,
#studio-react-root .checkbox-pill,
#studio-react-root .notice-chip,
#studio-react-root .status-pill,
#studio-react-root .output-path-chip {
  min-height: var(--ws-chip-height);
  border-radius: var(--ws-radius-pill);
}

#studio-react-root .button--primary,
#studio-react-root .segmented-tabs__item.is-active,
#studio-react-root .chip.is-active,
#studio-react-root .suggestion-pill:hover {
  background: linear-gradient(135deg, var(--studio-accent), var(--studio-accent-strong));
  box-shadow: var(--ws-shadow-button);
}

#studio-react-root .button--success {
  border-color: color-mix(in srgb, var(--studio-success) 48%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--studio-success) 76%, #155b36 24%),
      color-mix(in srgb, var(--studio-success) 62%, #0d3320 38%)
    );
  color: #f4fff8;
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--studio-success) 22%, transparent);
}

#studio-react-root .button--ghost:hover,
#studio-react-root .button--subtle:hover,
#studio-react-root .button--danger:hover,
#studio-react-root .segmented-tabs__item:hover,
#studio-react-root .icon-button:hover,
#studio-react-root .notice-chip:hover {
  border-color: var(--ws-ui-chip-border-strong);
  background: var(--ws-ui-chip-bg-strong);
}

#studio-react-root .button--danger {
  border-color: color-mix(in srgb, var(--studio-danger) 46%, transparent);
  background: color-mix(in srgb, var(--studio-danger) 18%, transparent);
}

#studio-react-root .button--icon-only {
  width: var(--ws-icon-button-size);
  min-width: var(--ws-icon-button-size);
  min-height: var(--ws-icon-button-size);
  padding: 0;
  border-radius: var(--ws-radius-pill);
}

#studio-react-root .button__icon {
  flex-shrink: 0;
}

#studio-react-root .button:focus-visible,
#studio-react-root .segmented-tabs__item:focus-visible,
#studio-react-root .icon-button:focus-visible,
#studio-react-root .chip:focus-visible,
#studio-react-root .checkbox-pill:focus-visible,
#studio-react-root .notice-chip:focus-visible,
#studio-react-root .status-pill:focus-visible {
  outline: none;
  box-shadow: var(--ws-focus-ring-shadow);
}

#studio-react-root .field__input,
#studio-react-root .output-textarea,
#studio-react-root .studio-select__trigger {
  min-height: var(--ws-control-height);
  border-radius: var(--ws-radius-md);
  border-color: var(--studio-border);
  background: var(--ws-ui-field-bg);
  transition: var(--ws-transition-standard);
}

#studio-react-root .field__input:hover,
#studio-react-root .output-textarea:hover,
#studio-react-root .studio-select__trigger:hover {
  border-color: var(--ws-ui-chip-border-strong);
  background: var(--ws-ui-field-bg-hover);
}

#studio-react-root .field__input:focus,
#studio-react-root .field__input:focus-visible,
#studio-react-root .output-textarea:focus,
#studio-react-root .output-textarea:focus-visible,
#studio-react-root .studio-select__trigger:focus,
#studio-react-root .studio-select__trigger:focus-visible,
#studio-react-root .studio-select.is-open .studio-select__trigger {
  outline: none;
  border-color: var(--ws-ui-chip-border-strong);
  background: var(--ws-ui-field-bg-focus);
  box-shadow: var(--ws-focus-ring-shadow);
}

#studio-react-root .modal-backdrop,
#studio-react-root .account-editor-backdrop,
#studio-react-root .account-section-dialog-backdrop {
  background: var(--ws-ui-overlay-bg);
  backdrop-filter: blur(var(--ws-blur-overlay));
}

#studio-react-root .modal-backdrop {
  z-index: var(--ws-z-overlay);
}

#studio-react-root .account-editor-backdrop {
  z-index: calc(var(--ws-z-modal) - 2);
}

#studio-react-root .account-section-dialog-backdrop {
  z-index: var(--ws-z-modal);
}

#studio-react-root .modal-card,
#studio-react-root .account-editor-dialog,
#studio-react-root .account-section-dialog {
  box-shadow: var(--ws-shadow-modal);
}

/* Workspace theme compatibility.
   This file loads after the React bundle, so these selectors bridge hard-coded
   workspace surfaces to the active White Studio theme without changing route
   or editor logic. */
#studio-react-root,
#studio-react-root .workbench-page,
#studio-react-root .workspace-shell,
#studio-react-root .studio-main,
#studio-react-root .studio-content,
#studio-react-root .account-self-shell,
#studio-react-root .account-workspace,
#studio-react-root .shared-markdown-shell,
#studio-react-root .content-manager-shell {
  color: var(--studio-text);
}

#studio-react-root .workbench-page__top.is-sticky,
#studio-react-root .workspace-shell__topbar {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--studio-bg) 94%, transparent) 0%,
      color-mix(in srgb, var(--studio-bg) 86%, transparent) 72%,
      transparent 100%
    );
}

#studio-react-root .studio-shell,
#studio-react-root .studio-gateway__brand,
#studio-react-root .studio-gateway__skeleton,
#studio-react-root .studio-gateway__card,
#studio-react-root .studio-auth-card,
#studio-react-root .studio-sidebar,
#studio-react-root .studio-sidebar__brand,
#studio-react-root .studio-sidebar__session,
#studio-react-root .studio-sidebar__note,
#studio-react-root .workspace-shell__surface,
#studio-react-root .panel-surface,
#studio-react-root .panel-card,
#studio-react-root .panel-summary-card,
#studio-react-root .panel-summary-list__item,
#studio-react-root .manager-item,
#studio-react-root .manager-empty,
#studio-react-root .manager-editor,
#studio-react-root .account-self-service-card,
#studio-react-root .account-self-tool-card,
#studio-react-root .account-profile-summary-card,
#studio-react-root .account-profile-summary-list__item,
#studio-react-root .account-detail-summary,
#studio-react-root .account-sections-editor,
#studio-react-root .account-section-summary-card,
#studio-react-root .account-section-item-card,
#studio-react-root .account-sections-editor__empty,
#studio-react-root .account-avatar-uploader,
#studio-react-root .account-workspace__rail,
#studio-react-root .account-workspace__editor-shell,
#studio-react-root .shared-markdown-shell__panel,
#studio-react-root .markdown-preview-shell,
#studio-react-root .shared-markdown-preview__toc,
#studio-react-root .shared-markdown-preview__safety-note,
#studio-react-root .shared-markdown-editor-core__notice,
#studio-react-root .media-dropzone,
#studio-react-root .media-card,
#studio-react-root .editor-section,
#studio-react-root .account-self-work-section,
#studio-react-root .editor-status-shell,
#studio-react-root .account-self-work-status-shell,
#studio-react-root .content-manager-shell__results,
#studio-react-root .content-manager-shell__editor,
#studio-react-root .content-manager-shell__preview,
#studio-react-root .content-source-editor,
#studio-react-root .publish-dialog__section,
#studio-react-root .content-settings-dialog,
#studio-react-root .metadata-inspector-drawer,
#studio-react-root .shared-markdown-shell__inspector-drawer,
#studio-react-root .content-manager-shell__inspector-drawer,
#studio-react-root .account-self-profile-inspector-drawer,
#studio-react-root .modal-shell,
#studio-react-root .modal-card,
#studio-react-root .account-editor-dialog,
#studio-react-root .account-section-dialog {
  border-color: var(--ws-workspace-border);
  background:
    radial-gradient(circle at top right, var(--ws-accent-soft), transparent 42%),
    var(--ws-workspace-panel-bg);
  color: var(--studio-text);
  box-shadow: var(--ws-shadow-card);
}

#studio-react-root .workspace-shell__surface--main,
#studio-react-root .shared-markdown-shell__panel--editor,
#studio-react-root .account-self-works-layout .workspace-shell__main > .manager-editor,
#studio-react-root .media-dropzone.is-filled,
#studio-react-root .media-card.is-cover,
#studio-react-root .manager-item.is-active,
#studio-react-root .nav-item.is-active,
#studio-react-root .chip.is-active {
  border-color: var(--ws-border-focus);
  background:
    radial-gradient(circle at top right, var(--ws-accent-soft), transparent 42%),
    color-mix(in srgb, var(--ws-accent-soft) 58%, var(--ws-workspace-panel-bg));
}

#studio-react-root .studio-sidebar__brand,
#studio-react-root .studio-sidebar__session,
#studio-react-root .studio-sidebar__note,
#studio-react-root .studio-gateway__advanced,
#studio-react-root .nav-item,
#studio-react-root .panel-alert,
#studio-react-root .workspace-metadata-card,
#studio-react-root .content-source-editor__meta,
#studio-react-root .shared-markdown-editor-core__notice,
#studio-react-root .shared-markdown-preview__toc,
#studio-react-root .shared-markdown-preview__safety-note {
  background: var(--ws-workspace-panel-bg-muted);
  border-color: var(--ws-workspace-border);
  color: var(--studio-text);
}

#studio-react-root .account-workspace__panel-header,
#studio-react-root .account-workspace__panel-meta,
#studio-react-root .account-workspace__panel-tabs,
#studio-react-root .account-workspace__panel-footer,
#studio-react-root .modal-shell__header,
#studio-react-root .modal-shell__status,
#studio-react-root .modal-shell__tabs,
#studio-react-root .modal-shell__footer,
#studio-react-root .account-editor-dialog__footer,
#studio-react-root .account-section-dialog__footer,
#studio-react-root .shared-markdown-shell__panel-head,
#studio-react-root .shared-markdown-shell__panel-footer,
#studio-react-root .metadata-inspector-drawer__header,
#studio-react-root .metadata-inspector-drawer__footer,
#studio-react-root .content-settings-dialog__header,
#studio-react-root .content-settings-dialog__footer {
  border-color: var(--ws-workspace-border);
  background: var(--ws-workspace-glass-bg);
  color: var(--studio-text);
}

#studio-react-root .studio-gateway__brand-title {
  background: linear-gradient(135deg, var(--ws-accent-text) 0%, var(--studio-accent) 55%, var(--studio-accent-strong) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

#studio-react-root .ws-topbar-scope {
  opacity: 1;
}

#studio-react-root h1,
#studio-react-root h2,
#studio-react-root h3,
#studio-react-root h4,
#studio-react-root .panel-header__copy h2,
#studio-react-root .panel-header__copy h3,
#studio-react-root .panel-header__copy h4,
#studio-react-root .nav-item__title,
#studio-react-root .studio-sidebar__session-name,
#studio-react-root .manager-item__title,
#studio-react-root .manager-empty__title,
#studio-react-root .field__label,
#studio-react-root .field__label-row,
#studio-react-root .panel-summary-card__copy h3,
#studio-react-root .account-profile-summary-card__copy h3,
#studio-react-root .panel-summary-list__item strong,
#studio-react-root .account-profile-summary-list__item strong,
#studio-react-root .editor-section__title,
#studio-react-root .account-self-work-section__title,
#studio-react-root .content-source-editor__title,
#studio-react-root .modal-shell__title,
#studio-react-root .account-workspace__panel-mobile-title {
  color: var(--studio-text);
}

#studio-react-root p,
#studio-react-root .nav-item__text,
#studio-react-root .panel-card__text,
#studio-react-root .panel-header__text,
#studio-react-root .panel-summary-card__text,
#studio-react-root .panel-summary-list__item span,
#studio-react-root .account-profile-summary-card__excerpt,
#studio-react-root .account-profile-summary-list__item span,
#studio-react-root .account-profile-summary-avatar__copy,
#studio-react-root .editor-section__text,
#studio-react-root .account-self-work-section__text,
#studio-react-root .panel-display-controls__viewport,
#studio-react-root .ws-topbar-scope,
#studio-react-root .hint-text,
#studio-react-root .manager-item__meta,
#studio-react-root .manager-item__summary,
#studio-react-root .manager-empty__detail,
#studio-react-root .panel-alert p,
#studio-react-root .account-workspace__panel-footer-copy,
#studio-react-root .account-workspace__empty-copy,
#studio-react-root .studio-gateway__brand-text,
#studio-react-root .studio-gateway__advanced-summary,
#studio-react-root .sidebar-list,
#studio-react-root .shared-markdown-preview__toc-item {
  color: var(--studio-muted);
}

#studio-react-root .eyebrow,
#studio-react-root .editor-section__eyebrow,
#studio-react-root .account-self-work-section__eyebrow,
#studio-react-root .panel-header__icon,
#studio-react-root .panel-empty-state__icon,
#studio-react-root .shared-markdown-preview__toc-item--h1,
#studio-react-root .shared-markdown-preview__toc-item--h2 {
  color: var(--ws-accent-text);
}

#studio-react-root .button,
#studio-react-root .segmented-tabs__item,
#studio-react-root .chip,
#studio-react-root .checkbox-pill,
#studio-react-root .notice-chip,
#studio-react-root .status-pill,
#studio-react-root .icon-button,
#studio-react-root .output-path-chip,
#studio-react-root .suggestion-pill,
#studio-react-root .panel-display-controls__summary,
#studio-react-root .shared-markdown-editor-core__tool,
#studio-react-root .content-source-editor__tab {
  border-color: var(--ws-ui-chip-border);
  background: var(--ws-ui-chip-bg);
  color: var(--studio-text);
}

#studio-react-root .button--primary,
#studio-react-root .segmented-tabs__item.is-active,
#studio-react-root .chip.is-active,
#studio-react-root .suggestion-pill:hover,
#studio-react-root .content-source-editor__tab.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--studio-accent), var(--studio-accent-strong));
  color: var(--ws-text-inverse);
}

#studio-react-root .button--success {
  color: var(--ws-text-inverse);
}

#studio-react-root .button--danger,
#studio-react-root .shared-markdown-editor-core__notice--error {
  border-color: color-mix(in srgb, var(--studio-danger) 44%, transparent);
  background: color-mix(in srgb, var(--studio-danger) 14%, var(--ws-workspace-panel-bg));
  color: color-mix(in srgb, var(--studio-danger) 36%, var(--studio-text));
}

#studio-react-root .shared-markdown-editor-core__notice--success {
  border-color: color-mix(in srgb, var(--studio-success) 44%, transparent);
  background: color-mix(in srgb, var(--studio-success) 13%, var(--ws-workspace-panel-bg));
  color: color-mix(in srgb, var(--studio-success) 24%, var(--studio-text));
}

#studio-react-root .button--ghost:hover,
#studio-react-root .button--subtle:hover,
#studio-react-root .segmented-tabs__item:hover,
#studio-react-root .icon-button:hover,
#studio-react-root .notice-chip:hover,
#studio-react-root .nav-item:hover,
#studio-react-root .manager-item:hover,
#studio-react-root .studio-gateway__advanced-summary:hover,
#studio-react-root .panel-display-controls__summary:hover {
  border-color: var(--ws-ui-chip-border-strong);
  background: var(--ws-ui-chip-bg-strong);
  color: var(--studio-text);
}

#studio-react-root .field__input,
#studio-react-root .output-textarea,
#studio-react-root .manager-editor__textarea,
#studio-react-root .shared-markdown-editor-core__textarea,
#studio-react-root .content-source-editor__title-input,
#studio-react-root .studio-select__trigger,
#studio-react-root .tag-input__control,
#studio-react-root select.field__input,
#studio-react-root textarea,
#studio-react-root input[type='text'],
#studio-react-root input[type='search'],
#studio-react-root input[type='url'],
#studio-react-root input[type='email'],
#studio-react-root input[type='number'] {
  border-color: var(--ws-workspace-border);
  background: var(--ws-ui-field-bg);
  color: var(--studio-text);
}

#studio-react-root .field__input::placeholder,
#studio-react-root .output-textarea::placeholder,
#studio-react-root .manager-editor__textarea::placeholder,
#studio-react-root .shared-markdown-editor-core__textarea::placeholder,
#studio-react-root .content-source-editor__title-input::placeholder,
#studio-react-root .tag-input__field::placeholder,
#studio-react-root textarea::placeholder,
#studio-react-root input::placeholder {
  color: var(--ws-text-muted);
  opacity: 0.82;
}

#studio-react-root .field__input:hover,
#studio-react-root .output-textarea:hover,
#studio-react-root .manager-editor__textarea:hover,
#studio-react-root .shared-markdown-editor-core__textarea:hover,
#studio-react-root .content-source-editor__title-input:hover,
#studio-react-root .studio-select__trigger:hover,
#studio-react-root .tag-input__control:hover {
  border-color: var(--ws-ui-chip-border-strong);
  background: var(--ws-ui-field-bg-hover);
}

#studio-react-root .field__input:focus,
#studio-react-root .field__input:focus-visible,
#studio-react-root .output-textarea:focus,
#studio-react-root .output-textarea:focus-visible,
#studio-react-root .manager-editor__textarea:focus,
#studio-react-root .manager-editor__textarea:focus-visible,
#studio-react-root .shared-markdown-editor-core__textarea:focus,
#studio-react-root .shared-markdown-editor-core__textarea:focus-visible,
#studio-react-root .content-source-editor__title-input:focus,
#studio-react-root .content-source-editor__title-input:focus-visible,
#studio-react-root .tag-input__control:focus-within,
#studio-react-root .studio-select.is-open .studio-select__trigger {
  border-color: var(--ws-border-focus);
  background: var(--ws-ui-field-bg-focus);
  box-shadow: var(--ws-focus-ring-shadow);
}

#studio-react-root select.field__input option,
#studio-react-root select.field__input optgroup,
#studio-react-root .studio-select__menu,
#studio-react-root .dropdown-menu,
#studio-react-root .popover,
#studio-react-root .panel-display-controls__body {
  background: var(--ws-bg-surface-raised);
  color: var(--studio-text);
  border-color: var(--ws-workspace-border);
}

#studio-react-root .markdown-preview-shell,
#studio-react-root .markdown-preview-shell .wmde-markdown,
#studio-react-root .markdown-preview-shell .wmde-markdown-color {
  background: var(--ws-workspace-panel-bg);
  color: var(--studio-text);
}

#studio-react-root .markdown-preview-shell .wmde-markdown h1,
#studio-react-root .markdown-preview-shell .wmde-markdown h2,
#studio-react-root .markdown-preview-shell .wmde-markdown h3,
#studio-react-root .markdown-preview-shell .wmde-markdown h4,
#studio-react-root .markdown-preview-shell .wmde-markdown th {
  color: var(--studio-text);
  border-color: var(--ws-workspace-border);
}

#studio-react-root .markdown-preview-shell .wmde-markdown p,
#studio-react-root .markdown-preview-shell .wmde-markdown li,
#studio-react-root .markdown-preview-shell .wmde-markdown td {
  color: var(--ws-text-secondary);
}

#studio-react-root .markdown-preview-shell .wmde-markdown a {
  color: var(--ws-accent-text);
  text-decoration-color: color-mix(in srgb, var(--ws-accent-text) 45%, transparent);
}

#studio-react-root .markdown-preview-shell .wmde-markdown blockquote {
  border-left-color: color-mix(in srgb, var(--studio-success) 62%, transparent);
  background: color-mix(in srgb, var(--studio-success) 10%, var(--ws-workspace-panel-bg));
  color: var(--ws-text-secondary);
}

#studio-react-root .markdown-preview-shell .wmde-markdown code {
  background: color-mix(in srgb, var(--ws-accent) 10%, var(--ws-bg-surface-muted));
  color: var(--ws-accent-text);
}

#studio-react-root .markdown-preview-shell .wmde-markdown pre,
#studio-react-root .markdown-preview-shell .wmde-markdown table,
#studio-react-root .markdown-preview-shell .wmde-markdown th,
#studio-react-root .markdown-preview-shell .wmde-markdown td,
#studio-react-root .markdown-preview-shell .wmde-markdown img {
  border-color: var(--ws-workspace-border);
}

#studio-react-root .markdown-preview-shell .wmde-markdown pre {
  background: var(--ws-bg-surface-muted);
}

#studio-react-root .markdown-preview-shell .wmde-markdown pre code {
  background: transparent;
  color: var(--studio-text);
}

#studio-react-root .w-md-editor,
#studio-react-root .w-md-editor-toolbar,
#studio-react-root .w-md-editor-content,
#studio-react-root .w-md-editor-text,
#studio-react-root .w-md-editor-preview,
#studio-react-root .w-md-editor-text-input,
#studio-react-root .w-md-editor-text-pre,
#studio-react-root .w-md-editor-text-pre > code,
#studio-react-root .wmde-markdown,
#studio-react-root .wmde-markdown-color {
  background-color: var(--ws-bg-input);
  color: var(--studio-text);
  border-color: var(--ws-workspace-border);
}

#studio-react-root .modal-backdrop,
#studio-react-root .modal-shell-backdrop,
#studio-react-root .account-editor-backdrop,
#studio-react-root .account-section-dialog-backdrop {
  background: var(--ws-ui-overlay-bg);
  backdrop-filter: blur(var(--ws-blur-overlay));
}

#studio-react-root [aria-disabled='true'],
#studio-react-root .is-disabled,
#studio-react-root :disabled {
  border-color: var(--ws-border-subtle);
  background: var(--ws-bg-surface-muted);
  color: color-mix(in srgb, var(--ws-text-muted) 82%, var(--ws-text-disabled));
  box-shadow: none;
  opacity: 1;
}

#studio-react-root .button:disabled,
#studio-react-root .button.is-disabled,
#studio-react-root .button[aria-disabled='true'],
#studio-react-root .segmented-tabs__item:disabled,
#studio-react-root .chip:disabled {
  border-color: var(--ws-border-subtle);
  background: var(--ws-bg-surface-muted);
  color: color-mix(in srgb, var(--ws-text-muted) 82%, var(--ws-text-disabled));
  box-shadow: none;
  cursor: not-allowed;
}

#studio-react-root .ws-panel-shell,
#studio-react-root .ws-panel-sidebar,
#studio-react-root .ws-panel-main,
#studio-react-root .ws-panel-inspector,
#studio-react-root .ws-panel-actionbar,
#studio-react-root .sticky-action-bar,
#studio-react-root .shared-markdown-shell__actionbar,
#studio-react-root .account-self-profile-actionbar,
#studio-react-root .account-self-profile-toolbar,
#studio-react-root .account-self-profile-rail,
#studio-react-root .account-self-profile-rail__item,
#studio-react-root .account-profile-live-preview__card,
#studio-react-root .account-profile-live-preview__fact,
#studio-react-root .account-profile-live-preview__contact,
#studio-react-root .account-profile-live-preview__inline-block,
#studio-react-root .account-profile-live-preview__section,
#studio-react-root .account-profile-live-preview__section-item,
#studio-react-root .avatar-cropper__viewport,
#studio-react-root .avatar-cropper__preview-card,
#studio-react-root .avatar-cropper__control-card,
#studio-react-root .image-manager-brief,
#studio-react-root .image-manager-brief__card,
#studio-react-root .image-manager-card,
#studio-react-root .image-manager-browser,
#studio-react-root .content-manager-shell__search,
#studio-react-root .content-manager-shell__advanced,
#studio-react-root .content-manager-shell__selection-summary,
#studio-react-root .content-manager-shell__selection-media,
#studio-react-root .content-manager-shell__selection-strip,
#studio-react-root .content-manager-shell__selection-thumb,
#studio-react-root .content-manager-shell__board,
#studio-react-root .content-manager-shell__media-summary,
#studio-react-root .content-manager-shell__preview-thumb,
#studio-react-root .content-manager-shell__image-items li,
#studio-react-root .content-manager-shell__backup,
#studio-react-root .manager-search-shell,
#studio-react-root .panel-stat,
#studio-react-root .dashboard-summary-stat,
#studio-react-root .shared-markdown-shell__mobile-actionbar,
#studio-react-root .shared-markdown-shell__mobile-sheet,
#studio-react-root .shared-markdown-shell__inspector-drawer,
#studio-react-root .content-manager-shell__inspector-drawer,
#studio-react-root .account-self-profile-inspector-drawer {
  border-color: var(--ws-workspace-border);
  background:
    radial-gradient(circle at top right, var(--ws-accent-soft), transparent 40%),
    var(--ws-workspace-panel-bg);
  color: var(--studio-text);
  box-shadow: var(--ws-shadow-card);
}

#studio-react-root .nav-item__icon,
#studio-react-root .account-self-tool-card__icon,
#studio-react-root .account-self-profile-rail__item-icon,
#studio-react-root .account-profile-live-preview__section-icon {
  border-color: var(--ws-workspace-border);
  background: var(--ws-ui-chip-bg);
  color: var(--ws-accent-text);
}

#studio-react-root .account-profile-live-preview__handle,
#studio-react-root .account-profile-live-preview__role,
#studio-react-root .account-profile-live-preview__tagline,
#studio-react-root .account-profile-live-preview__bio,
#studio-react-root .account-profile-live-preview__section-label,
#studio-react-root .account-profile-live-preview__section-item-label,
#studio-react-root .account-profile-live-preview__empty,
#studio-react-root .account-profile-live-preview__fact-label,
#studio-react-root .account-profile-live-preview__contact-label,
#studio-react-root .content-manager-shell__search-help,
#studio-react-root .content-manager-shell__quick-label,
#studio-react-root .content-manager-shell__selection-strip-copy .hint-text,
#studio-react-root .content-manager-shell__selection-strip-copy .field__label,
#studio-react-root .image-manager-brief__card span,
#studio-react-root .image-manager-card__copy span {
  color: var(--studio-muted);
}

#studio-react-root .account-profile-live-preview__fact-value,
#studio-react-root .account-profile-live-preview__contact-value,
#studio-react-root .account-profile-live-preview__section-item-title,
#studio-react-root .account-profile-live-preview__section-item-value,
#studio-react-root .content-manager-shell__selection-copy h3,
#studio-react-root .content-manager-shell__meta-list dd,
#studio-react-root .content-manager-shell__media-summary-meta dd,
#studio-react-root .image-manager-brief__card strong,
#studio-react-root .image-manager-card__copy strong,
#studio-react-root .panel-stat strong,
#studio-react-root .dashboard-summary-stat strong {
  color: var(--studio-text);
}

#studio-react-root .avatar-cropper__avatar,
#studio-react-root .account-profile-live-preview__avatar,
#studio-react-root .content-manager-shell__selection-image,
#studio-react-root .content-manager-shell__preview-image,
#studio-react-root .image-manager-card__preview {
  border-color: var(--ws-workspace-border);
  background: var(--ws-bg-surface-muted);
}

#studio-react-root .shared-markdown-shell__mobile-sheet-head,
#studio-react-root .shared-markdown-shell__inspector-drawer-head,
#studio-react-root .content-manager-shell__inspector-drawer-head,
#studio-react-root .account-self-profile-inspector-drawer__head {
  border-color: var(--ws-workspace-border);
  background: var(--ws-workspace-glass-bg);
}

#studio-react-root .metadata-inspector-backdrop,
#studio-react-root .shared-markdown-shell__mobile-sheet-backdrop,
#studio-react-root .shared-markdown-shell__inspector-drawer-backdrop,
#studio-react-root .content-manager-shell__inspector-drawer-backdrop,
#studio-react-root .account-self-profile-inspector-drawer-backdrop {
  background: var(--ws-ui-overlay-bg);
}

@media (max-width: 1024px) {
  .works-modal__panel {
    width: min(100%, 68rem);
  }

  .studio-admin-footer__inner {
    gap: var(--ws-space-3);
  }
}

@media (max-width: 768px) {
  .works-toolbar,
  .profile-loading,
  .profile-error {
    padding: var(--ws-space-4);
    border-radius: var(--ws-radius-md);
  }

  .works-modal__panel,
  .modal-content {
    border-radius: var(--ws-radius-lg);
  }

  .works-modal__header {
    padding: var(--ws-space-4);
  }

  .works-modal__content {
    padding: var(--ws-space-4);
  }

  .studio-admin-footer__inner {
    width: min(100% - 1.25rem, var(--ws-content-wide));
  }
}

@media (max-width: 640px) {
  .button,
  .back-link,
  .download-btn,
  .filter-chip,
  .profile-action-btn,
  .profile-inline-link,
  .works-modal__locale-button {
    width: 100%;
    justify-content: center;
  }

  .works-modal__close {
    width: var(--ws-icon-button-size);
    height: var(--ws-icon-button-size);
  }

  .studio-admin-footer__inner {
    flex-direction: column;
    text-align: center;
  }
}