/* ============================================
   PURPLE THEME OVERRIDES
   Drop this after your main index.css
   ============================================ */

:root {
  /* GrapeJS core variables */
  --gjs-main-color: #1a1523;
  --gjs-primary-color: #7c5cfc;
  --gjs-secondary-color: #e4e0ff;
  --gjs-tertiary-color: #5a3db8;
  --gjs-quaternary-color: #9d7dfd;
  --gjs-font-color: #2d2450;
  --gjs-font-color-active: #1a1523;

  /* App color tokens */
  --lc-color-page: #e9edf3;
  --lc-color-app: #e8e5ff;
  --lc-color-panel: #f2f0ff;
  --lc-color-panel-subtle: #f4f3ff;
  --lc-color-control: #f8f7ff;
  --lc-color-control-hover: #eae5ff;
  --lc-color-input: #ffffff;
  --lc-color-border: #d8d2ff;
  --lc-color-border-strong: #c9c0ff;
  --lc-color-text: #1a1523;
  --lc-color-text-muted: #6b6880;
  --lc-color-text-subtle: #8a84a3;
  --lc-color-accent: #7c5cfc;
  --lc-color-accent-soft: #3d2a8a;
  --lc-color-accent-hover: #c9baff;
  --lc-color-danger: #ffb8b8;
  --lc-color-danger-bg: #241224;
  --lc-color-danger-border: #5a285a;
  --lc-color-danger-strong: #c050b8;
  --lc-color-warning: #c5b5ff;
  --lc-color-warning-bg: #2b2140;
  --lc-shadow-focus: 0 0 0 3px rgba(124, 92, 252, .14);
}

/* GrapeJS theme class overrides */
.gjs-one-bg  { background-color: #f4f3ff; }
.gjs-two-color { color: #1a1523; }
.gjs-three-bg { background-color: #f8f7ff; }
.gjs-four-color, .gjs-four-color-h:hover { color: #7c5cfc; }

.gjs-pn-panel, .gjs-block, .gjs-sm-sector, .gjs-layer { border-color: #d9d3ff; }
.gjs-block { background: #f8f7ff; color: #1a1523; }
.gjs-block:hover { background: #eae5ff; }
.gjs-block-label, .gjs-sm-sector-title, .gjs-layer-title, .gjs-clm-tags, .gjs-trt-traits { color: #1a1523; }
.gjs-sm-property, .gjs-sm-label, .gjs-field, .gjs-field input, .gjs-field select, .gjs-field textarea { color: #2d2450; }
.gjs-field { background: #f2f0ff; border-color: #c9c0ff; }
.gjs-block__media svg { color: #7c5cfc; }
.gjs-cv-canvas { background: #e8e5ff; }

/* Body / page background */
body { background: #e9edf3; color: #1a1523; }

/* Builder shell */
.builder, .grapes-shell { background: #e8e5ff; color: #1a1523; }

/* Topbar */
.topbar { border-bottom-color: #e4e0ff; background: #ffffff; color: #1a1523; }
.topbar button, .topbar a { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.topbar button:hover, .topbar a:hover { background: #eae5ff; }
.publish-trigger, .topbar .publish-trigger { border-color: #7c5cfc; background: #7c5cfc; color: #1a0f3d; }

/* Left pages panel */
.pages-panel { border-right-color: #e4e0ff; background: #f4f3ff; color: #1a1523; }
.pages-panel-header { border-bottom-color: #e4e0ff; }
.pages-panel-header button, .page-settings button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.page-item:hover, .page-item.is-active { border-color: #5a3db8; background: #3d2a8a; }

/* Right panel / blocks */
.gjs-pn-views, .gjs-pn-views-container { background: #f4f3ff; }

/* Canvas controls */
.canvas-controls { border-color: #d8d2ff; background: #fffffff0; }
.canvas-controls button:hover { border-color: #cfc9ff; background: #eae5ff; }
.canvas-controls button.is-active { border-color: #7c5cfc; background: #7c5cfc; color: #1a0f3d; }

/* Workspace */
.workspace-topbar { border-bottom-color: #e4e0ff; background: #ffffff; }
.workspace-topbar strong { color: #7c5cfc; }
.workspace-sidebar { border-right-color: #e4e0ff; background: #f4f3ff; }
.workspace-page, .workspace-shell { background: #e8e5ff; color: #1a1523; }

/* Builder state pills */
.builder-state-pill { border-color: #c9c0ff; background: #f8f7ff; color: #2d2450; }
.builder-state-pill.saved { border-color: #5a3db8; background: #3d2a8a; color: #7c5cfc; }
.builder-state-pill.dirty { border-color: #6b4fb8; background: #211a3f; color: #d4c8ff; }
.builder-state-pill.error { border-color: #8f3b6a; background: #2a1228; color: #ffb8b8; }

/* Dialogs */
.dialog-content { border-color: #d8d2ff; background: #ffffff; color: #1a1523; }
.dialog-description { color: #6b6880; }
.dialog-field input, .dialog-field select, .dialog-field textarea { border-color: #c9c0ff; background: #f2f0ff; color: #1a1523; }
.dialog-actions button { border-color: #7c5cfc; background: #7c5cfc; color: #1a0f3d; }
.dialog-actions .secondary-button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.project-settings-tabs-list { border-color: #d8d2ff; background: #f4f3ff; }
.tracking-status.is-valid { color: #7c5cfc; }
.tracking-status.is-empty { color: #6b6880; }
.project-settings-warning { border-color: #4a3a70; background: #2a2140; color: #c9b7ff; }

/* Publish popover */
.publish-popover { border-color: #d8d2ff; background: #ffffff; color: #1a1523; }
.publish-popover p { color: #6b6880; }
.publish-action { border-color: #7c5cfc; background: #7c5cfc; color: #1a0f3d; }
.publish-popover-arrow { fill: #ffffff; }
.popover-close { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.published-link-row input { border-color: #c9c0ff; background: #f2f0ff; color: #1a1523; }
.published-link-row a { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }

/* Accent / switch / checkbox */
.form-switch-root { border-color: #c9c0ff; background: #ece8ff; }
.form-switch-root[data-state=checked] { border-color: #7c5cfc; background: #5a3db8; }
.form-switch-thumb { background: #1a1523; }
.form-checkbox-root { border-color: #c9c0ff; background: #f4f3ff; color: #1a0f3d; }
.form-checkbox-root[data-state=checked] { border-color: #7c5cfc; background: #7c5cfc; }
.form-checkbox-root:focus, .form-switch-root:focus { outline-color: #7c5cfc; }

/* SEO preview */
.seo-preview { border-color: #d8d2ff; background: #ffffff; }
.seo-preview span { color: #7c5cfc; }
.seo-preview strong { color: #9d7dfd; }
.seo-preview p { color: #6b6880; }
.seo-checkbox input { accent-color: #7c5cfc; }

/* Auth pages */
.auth-page { background: #e8e5ff; }
.auth-visual { background: linear-gradient(135deg, #7c5cfce0, #7c5cfce0), #6e4fd4; }
.auth-form > button { background: #7c5cfc; color: #1a0f3d; }
.auth-switch button { color: #7c5cfc; }
.auth-eyebrow { color: #7c5cfc; }

/* ---- Previously missing classes ---- */

/* Builder theme editor */
.builder-theme-editor { border-color: #d8d2ff; background: #f2f0ff; }
.builder-theme-toolbar { border-bottom-color: #e4e0ff; }
.builder-theme-toolbar strong { color: #1a1523; }
.builder-theme-toolbar span { color: #6b6880; }
.builder-theme-code-editor { border-color: #d8d2ff; background: #f0eeff; }
.builder-theme-code-editor .cm-editor { background: #f0eeff; }
.builder-theme-code-editor .cm-gutters { border-right-color: #e4e0ff; background: #ffffff; color: #8a84a3; }
.builder-theme-code-editor .cm-tooltip { border-color: #d8d2ff; background: #f2f0ff; color: #1a1523; }
.builder-theme-code-editor:focus-within { border-color: #7c5cfc; }
.builder-theme-version-row { border-color: #e4e0ff; background: #f4f3ff; }
.builder-theme-version-row strong { color: #1a1523; }
.builder-theme-version-row span { color: #6b6880; }

/* Workspace nav */
.workspace-nav-item { color: #6b6880; }
.workspace-nav-item.is-active, .workspace-nav-item:hover { background: #ede9ff; color: #1a1523; }

/* Account cards */
.account-card { border-color: #d8d2ff; background: #f2f0ff; }
.account-card p { color: #6b6880; }
.account-card button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.account-card button:hover { background: #eae5ff; }
.account-field label { color: #2d2450; }
.account-field input, .account-field select { border-color: #d8d2ff; background: #ffffff; color: #1a1523; }
.account-meta { color: #6b6880; }
.account-meta strong { background: #3d2a8a; color: #7c5cfc; }
.account-status { border-color: #5a3db8; background: #3d2a8a; color: #e8e1ff; }
.account-error { border-color: #8f3b6a; background: #2a1228; color: #ffb8b8; }
.danger-account-card { border-color: #4a254a; }
.danger-account-card button { border-color: #5a285a; background: #241224; color: #ffb8b8; }

/* ---- Button overrides ---- */

/* Generic secondary button (used across many panels) */
.secondary-button, .danger-button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.secondary-button:hover { background: #eae5ff; }
.danger-button { border-color: #5a285a; background: #241224; color: #ffb8b8; }
.danger-button:hover { border-color: #c050b8; color: #eed1ff; }

/* Topbar buttons */
.topbar button, .topbar a { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.topbar button:hover, .topbar a:hover { background: #eae5ff; }
.topbar .builder-view-tabs button:hover, .topbar .builder-view-tabs button.is-active { background: #3d2a8a; color: #7c5cfc; }

/* Canvas controls */
.canvas-controls button:hover { border-color: #cfc9ff; background: #eae5ff; }
.canvas-controls button.is-active { border-color: #7c5cfc; background: #7c5cfc; color: #1a0f3d; }

/* Pages panel buttons */
.pages-panel-header button, .page-settings button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.pages-panel-header button:hover, .page-settings button:hover { background: #eae5ff; }

/* Component properties close button */
.component-properties-header button { border-color: #d8d2ff; background: #ffffff; color: #6b6880; }
.component-properties-header button:hover { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }

/* Workspace topbar / hero / empty projects */
.workspace-topbar button, .workspace-hero button, .empty-projects button { border-color: #c9c0ff; background: #7c5cfc; color: #1a0f3d; }
.workspace-user-menu button:hover { background: #ede9ff; color: #1a1523; }

/* Workspace avatar */
.workspace-avatar-button, .workspace-topbar .workspace-avatar-button { border-color: #d8d2ff; background: #3d2a8a; color: #7c5cfc; }

/* Project edit/delete buttons */
.project-edit-button { border-color: #5a3db8; background: #3d2a8a; color: #7c5cfc; }
.project-edit-button:hover { border-color: #7c5cfc; background: #4a33a0; }
.project-delete-button { border-color: #4a254a; background: #221222; color: #ffb8b8; }
.project-delete-button:hover { border-color: #8f3b6a; background: #2a1228; }

/* Builder theme actions */
.builder-theme-header-actions button, .builder-theme-header-actions a, .builder-theme-actions button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.builder-theme-header-actions button:hover, .builder-theme-header-actions a:hover, .builder-theme-actions button:hover { background: #eae5ff; }
.builder-theme-actions button:first-child { border-color: #9d7dfd; background: #7c5cfc; color: #1a0f3d; }
.builder-theme-actions button:first-child:hover { background: #b39afe; }
.builder-theme-versions-heading button, .builder-theme-version-row button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.builder-theme-versions-heading button:hover, .builder-theme-version-row button:hover { background: #eae5ff; }

/* Team buttons */
.team-create-workspace button, .team-member-row button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.team-create-workspace button:hover, .team-member-row button:hover { background: #eae5ff; }
.team-danger-zone button { border-color: #5a285a; background: #241224; color: #ffb8b8; }
.team-danger-zone button:hover { background: #2a1228; }

/* Forms buttons */
.forms-manager-header button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.forms-list button { border-color: #e4e0ff; background: #ffffff; color: #1a1523; }
.forms-list button:hover, .forms-list button.is-active { border-color: #5a3db8; background: #3d2a8a; box-shadow: inset 3px 0 #7c5cfc; }
.forms-empty-state button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.forms-empty-state button:hover { background: #eae5ff; }
.form-settings-heading button, .form-settings-actions button { border-color: #5a3db8; background: #3d2a8a; color: #c9baff; }
.form-card-delete, .submission-delete-button { border-color: #5a285a; background: #241224; color: #ffb8b8; }
.form-card-delete:hover, .submission-delete-button:hover { border-color: #c050b8; color: #eed1ff; }

/* Media card buttons */
.media-card-actions button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.media-card-actions button:hover { background: #eae5ff; }
.media-card-actions .danger-button { border-color: #5a285a; background: #241224; color: #ffb8b8; }

/* Publishing / version buttons */
.publishing-status-card a, .version-row button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }

/* SEO audit page list */
.seo-audit-page-list button { border-color: #e4e0ff; background: #f4f3ff; color: #1a1523; }
.seo-audit-page-list button:hover, .seo-audit-page-list button.is-active { border-color: #7c5cfc; background: #3d2a8a; }

/* Dialog actions */
.dialog-actions button { border-color: #7c5cfc; background: #7c5cfc; color: #1a0f3d; }
.dialog-actions .secondary-button { border-color: #c9c0ff; background: #f8f7ff; color: #1a1523; }
.dialog-actions .danger-button { border-color: #8f3b6a; background: #2a1228; color: #ffb8b8; }

/* Project settings tabs */
.project-settings-tabs-list button:hover, .project-settings-tabs-list button[data-state=active] { background: #f8f7ff; color: #1a1523; }

/* Google login */
.google-login-button { border-color: #d4ceff; background: #fff; color: #151515; }
.google-login-button.is-disabled { background: #f2f0ff; color: #8a84a3; }

/* Design template item */
.design-template-item button:hover { border-color: #9d7dfd; background: #ede9ff; color: #7c5cfc; }

/* ---- Eyebrow labels ---- */
.workspace-eyebrow { color: #7c5cfc !important; }
.auth-eyebrow { color: #7c5cfc; }
.lc-eyebrow { color: var(--lc-color-accent); } /* already uses --lc-color-accent: #7c5cfc */

/* ---- Recommendation grid ---- */
.recommendation-grid article {
  border-color: #F4F3FE;
  background: linear-gradient(135deg, #7c5cfc1f, #9d7dfd1f), #ffffff;
}
.recommendation-grid span { color: #7c5cfc; }
.recommendation-grid strong { color: #1a1523; }

/* ---- Project management controls ---- */
.project-management-controls input,
.project-management-controls select {
  border-color: #d8d2ff;
  background: #ffffff;
  color: #1a1523;
}
.project-management-controls input::placeholder { color: #8a84a3; }
.project-management-controls input:focus,
.project-management-controls select:focus { border-color: #7c5cfc; outline: none; box-shadow: 0 0 0 3px rgba(124,92,252,.14); }

/* ---- Project card ---- */
.project-card { border-color: #F4F3FE; background: #ffffff; }
.project-card:hover { border-color: #c9baff; background: #f9f8ff; }

/* Card body text */
.project-card-title-row strong { color: #1a1523; }

/* Meta labels (dt) & values (dd) */
.project-card-meta dt { color: #8a84a3; }
.project-card-meta dd { color: #2d2450; }

/* Edit / delete buttons inside card */
.project-edit-button { border-color: #c9baff; background: #f0eeff; color: #7c5cfc; }
.project-edit-button:hover { border-color: #7c5cfc; background: #e4dcff; }
.project-delete-button { border-color: #e8c0e8; background: #fdf0fd; color: #c050b8; }
.project-delete-button:hover { border-color: #c050b8; background: #f5d8f5; }

/* ---- Workspace / hero / empty-projects primary buttons ---- */
/* Purple bg → white text & white icon for contrast */
.workspace-topbar button,
.workspace-hero button,
.empty-projects button {
  border-color: #6a4ee8;
  background: #7c5cfc;
  color: #ffffff;
}
.workspace-topbar button:hover,
.workspace-hero button:hover,
.empty-projects button:hover { background: #6a4ee8; }
/* Icons inside these buttons inherit white */
.workspace-topbar button svg,
.workspace-hero button svg,
.empty-projects button svg { color: #ffffff; }

/* ---- Project cover ---- */
.project-cover {
  border-bottom-color: #e4e0ff;
  background: linear-gradient(135deg, #7c5cfc26, #9d7dfd1f), #f0eeff;
  color: #7c5cfc !important;
}

/* ---- Project status badge ---- */
.project-status-badge { background: #ede9ff; color: #7c5cfc; }
.project-status-badge.is-archived { background: #f2f0ff; color: #9d7dfd; }

/* ---- Project delete button (replace pink with a clear red-on-light) ---- */
.project-delete-button {
  border-color: #e0c8ff;
  background: #f5f0ff;
  color: #8b5cf6;
}
.project-delete-button:hover {
  border-color: #7c5cfc;
  background: #ede9ff;
  color: #6a4ee8;
}

/* ---- Team inputs & selects ---- */
.team-create-workspace input,
.team-workspace-switcher select,
.team-member-row select {
  border-color: #d8d2ff;
  background: #ffffff;
  color: #1a1523;
}
.team-create-workspace input::placeholder { color: #8a84a3; }
.team-create-workspace input:focus,
.team-workspace-switcher select:focus,
.team-member-row select:focus {
  border-color: #7c5cfc;
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,92,252,.14);
}
.team-create-workspace button:disabled,
.team-member-row button:disabled,
.team-member-row select:disabled { opacity: .45; }

/* ---- Team workspace switcher ---- */
.team-workspace-switcher {
  border-color: #e4e0ff;
  background: #f8f7ff;
}
.team-workspace-switcher label,
.team-workspace-switcher span { color: #6b6880; }

/* ---- Team member row ---- */
.team-member-row {
  border-color: #e4e0ff;
  background: #ffffff;
}
/* Avatar / initials circle */
.team-member-row img,
.team-member-row > span:first-child {
  background: #ede9ff;
  color: #7c5cfc;
}
/* Name strong */
.team-member-row strong { color: #1a1523; }
/* Sub-label (email / role text) */
.team-member-row div span,
.team-pending-invites p { color: #6b6880; }
/* Role select inside the row */
.team-member-row select {
  border-color: #d8d2ff;
  background: #ffffff;
  color: #1a1523;
}
/* Action button inside row */
.team-member-row button {
  border-color: #c9c0ff;
  background: #f8f7ff;
  color: #1a1523;
}
.team-member-row button:hover { background: #eae5ff; }

/* ================================================
   CLEAN WHITE SIDEBAR & PANEL OVERRIDES
   Matches screenshot: white panels, light canvas
   ================================================ */

/* ---- Topbar (builder) ---- */
.topbar {
  border-bottom-color: #eeebff;
  background: #ffffff;
  color: #1a1523;
}
.topbar-editing-chip { border-color: #e4e0ff; background: #f4f3ff; color: #2d2450; }
.topbar .builder-view-tabs button { color: #6b6880; }
.topbar .builder-view-tabs button:hover,
.topbar .builder-view-tabs button.is-active { background: #f0eeff; color: #7c5cfc; }
.topbar button, .topbar a { border-color: #e4e0ff; background: #ffffff; color: #1a1523; }
.topbar button:hover, .topbar a:hover { background: #f4f3ff; }
.publish-trigger, .topbar .publish-trigger { border-color: #7c5cfc; background: #7c5cfc; color: #ffffff; }

/* ---- Workspace topbar ---- */
.workspace-topbar { border-bottom-color: #eeebff; background: #ffffff; color: #1a1523; }
.workspace-topbar button { background: transparent; color: #1a1523; border-color: #e4e0ff; }
.workspace-topbar button:hover { background: #f4f3ff; }

/* ---- Left pages panel ---- */
.pages-panel { border-right-color: #eeebff; background: #ffffff; color: #1a1523; }
.pages-panel-header { border-bottom-color: #eeebff; background: #ffffff; }
.pages-panel-header button, .page-settings button { border-color: #e4e0ff; background: #ffffff; color: #1a1523; }
.pages-panel-header button:hover, .page-settings button:hover { background: #f4f3ff; }
.pages-panel-header .section-toggle { color: #1a1523; }
.pages-panel-header .section-toggle:hover { color: #7c5cfc; }

/* ---- Workspace sidebar (nav rail) ---- */
.workspace-sidebar { border-right-color: #eeebff; background: #ffffff; }
.workspace-nav-item { color: #6b6880; }
.workspace-nav-item.is-active, .workspace-nav-item:hover { background: #f0eeff; color: #7c5cfc; }

/* ---- Right GrapeJS panels ---- */
.gjs-pn-panel { background: #ffffff; border-color: #eeebff; }
.gjs-pn-views, .gjs-pn-views-container { background: #ffffff; border-left-color: #eeebff; }
.gjs-one-bg { background-color: #ffffff; }
.gjs-three-bg { background-color: #f8f7ff; }

/* ---- Canvas ---- */
.gjs-cv-canvas { background: #f0eeff; }
.canvas-controls { border-color: #e4e0ff; background: #ffffffee; box-shadow: 0 4px 16px rgba(124,92,252,.1); }
.canvas-controls button { color: #1a1523; }
.canvas-controls button:hover { border-color: #d8d2ff; background: #f4f3ff; }
.canvas-controls button.is-active { border-color: #7c5cfc; background: #7c5cfc; color: #ffffff; }

/* ---- Component properties panel ---- */
.component-properties-panel { border-color: #e4e0ff; background: #ffffff; color: #1a1523; box-shadow: 0 8px 32px rgba(124,92,252,.12); }
.component-properties-header { border-bottom-color: #eeebff; background: #ffffff; }

/* ---- Account cards ---- */
.account-card { border-color: #eeebff; background: #ffffff; }
.account-card button { border-color: #e4e0ff; background: #ffffff; color: #1a1523; }
.account-card button:hover { background: #f4f3ff; }

/* ---- Builder theme editor ---- */
.builder-theme-editor { border-color: #eeebff; background: #ffffff; }
.builder-theme-version-row { border-color: #eeebff; background: #f8f7ff; }

/* ---- Forms sidebar ---- */
.forms-sidebar, .form-detail-card, .forms-empty-state { border-color: #eeebff; background: #ffffff; }
.forms-sidebar-heading span { background: #f0eeff; color: #7c5cfc; }

/* ---- Dialog ---- */
.dialog-content { border-color: #e4e0ff; background: #ffffff; color: #1a1523; box-shadow: 0 16px 60px rgba(124,92,252,.15); }

/* ---- GrapeJS blocks & sectors ---- */
.gjs-block { background: #ffffff; color: #1a1523; border-color: #eeebff; }
.gjs-block:hover { background: #f4f3ff; }
.gjs-sm-sector-title, .gjs-layer-title { background: #ffffff; color: #1a1523; border-bottom-color: #eeebff; }
.gjs-field { background: #f8f7ff; border-color: #e4e0ff; color: #1a1523; }

/* ---- Main body background ---- */
.workspace-page { background: #f5f5f5; color: #1a1523; }

/* ---- Main body background (easy on eyes, barely-there purple tint) ---- */
.workspace-page,
.workspace-shell { background: #f0eff5; color: #1a1523; }

/* ================================================
   COMPREHENSIVE CLEAN-UP — matches reference UI
   ================================================ */

/* ---- Page & shell background ---- */
.workspace-page,
.workspace-shell { background: #f7f7f8; color: #1a1523; }

/* ---- Sidebar ---- */
.workspace-sidebar { background: #ffffff; border-right: 1px solid #ebebef; }
.workspace-nav-item { color: #52525b; background: transparent; border-radius: 6px; }
.workspace-nav-item.is-active { background: #f0eeff; color: #7c5cfc; font-weight: 700; }
.workspace-nav-item:hover { background: #f4f4f6; color: #1a1523; }

/* ---- Workspace hero area ---- */
.workspace-hero h1 { color: #0f0f11; }
.workspace-hero p { color: #71717a; }
.workspace-eyebrow { color: #7c5cfc !important; font-size: 12px; }

/* ---- Recommendation cards ---- */
.recommendation-grid article {
  border: 1px solid #e8e8ed;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.recommendation-grid article:hover { border-color: #c4b8fc; box-shadow: 0 2px 8px rgba(124,92,252,.1); }
.recommendation-grid span { color: #7c5cfc; font-size: 12px; font-weight: 800; }
.recommendation-grid strong { color: #0f0f11; }

/* ---- Search & filter inputs ---- */
.project-management-controls input,
.project-management-controls select {
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #1a1523;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.project-management-controls input::placeholder { color: #a1a1aa; }
.project-management-controls input:focus,
.project-management-controls select:focus {
  border-color: #7c5cfc;
  box-shadow: 0 0 0 3px rgba(124,92,252,.12);
  outline: none;
}

/* ---- Project card ---- */
.project-card {
  border: 1px solid #e8e8ed;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.project-card:hover {
  border-color: #c4b8fc;
  box-shadow: 0 4px 16px rgba(124,92,252,.1);
}

/* Card cover */
.project-cover {
  border-bottom: 1px solid #eeeef2;
  background: linear-gradient(135deg, #ede9ff, #ddd6fe);
  color: #7c5cfc !important;
}

/* Card body */
.project-card-title-row strong { color: #0f0f11; font-size: 17px; }
.project-open-button:hover { color: #7c5cfc; }
.project-open-button small { color: #a1a1aa; }

/* Meta labels / values */
.project-card-meta dt { color: #a1a1aa; font-size: 10px; letter-spacing: .04em; }
.project-card-meta dd { color: #3f3f46; font-size: 13px; }

/* Status badge */
.project-status-badge { background: #ede9ff; color: #7c5cfc; font-size: 11px; font-weight: 800; }
.project-status-badge.is-archived { background: #f4f4f6; color: #71717a; }

/* Action strip at bottom of card */
.project-actions {
  border-top: 1px solid #eeeef2;
  background: #fafafa;
  padding: 10px 12px;
}
.project-edit-button {
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #3f3f46;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  min-height: 32px;
}
.project-edit-button:hover { border-color: #c4b8fc; background: #f5f3ff; color: #7c5cfc; }
.project-delete-button {
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #ef4444;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  min-height: 32px;
}
.project-delete-button:hover { border-color: #fca5a5; background: #fff5f5; color: #dc2626; }

/* ---- Page items in left panel ---- */
.page-item { color: #1a1523; border-radius: 6px; }
.page-item small { color: #71717a; }
.page-item:hover { border-color: #e4e0ff; background: #f4f3ff; }
.page-item.is-active { border-color: #c4b8fc; background: #f0eeff; }

/* ---- New project button ---- */
.workspace-topbar button,
.workspace-hero button,
.empty-projects button {
  background: #7c5cfc;
  border-color: #7c5cfc;
  color: #ffffff;
  border-radius: 8px;
}
.workspace-topbar button:hover,
.workspace-hero button:hover,
.empty-projects button:hover { background: #6d4ef0; border-color: #6d4ef0; }


/* ================================================
   BUILDER UI — FULL DIAGNOSIS FIX
   Based on live HTML + screenshot audit
   ================================================ */

/* ---- Topbar ---- */
.topbar { background: #ffffff; border-bottom: 1px solid #ebebef; color: #1a1523; }

/* Project name & breadcrumb */
.topbar-project-name { color: #1a1523; }
.topbar-separator { color: #d4d4d8; }
.topbar-editing-chip { border-color: #e4e0ff; background: #f4f3ff; color: #3f3f46; }
.topbar-editing-chip span { color: #7c5cfc; }       /* "PAGE" label */
.topbar-editing-chip strong { color: #1a1523; }      /* page name */
.topbar-editing-chip small { color: #a1a1aa; }

/* Status */
.topbar-status { color: #71717a; }
.topbar-status-stack small { color: #a1a1aa; }

/* State pill (Draft / Saved / Saving...) */
.builder-state-pill { border-color: #e4e4e7; background: #f4f4f6; color: #52525b; }
.builder-state-pill.saved { border-color: #c4b8fc; background: #f0eeff; color: #7c5cfc; }
.builder-state-pill.dirty { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.builder-state-pill.saving,
.builder-state-pill.autosaving { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.builder-state-pill.error { border-color: #fca5a5; background: #fff5f5; color: #dc2626; }

/* Topbar action buttons (Save / Preview) */
.topbar-actions button,
.save-button { border: 1px solid #e4e4e7; background: #ffffff; color: #1a1523; border-radius: 6px; }
.topbar-actions button:hover,
.save-button:hover { background: #f4f4f6; }

/* Publish button */
.publish-trigger,
.topbar .publish-trigger { border-color: #7c5cfc; background: #7c5cfc; color: #ffffff; }
.publish-trigger:hover { background: #6d4ef0; border-color: #6d4ef0; }

/* View tabs (Editor / Data / Forms...) */
.builder-view-tabs { border-color: #ebebef; background: #f4f4f6; border-radius: 8px; }
.topbar .builder-view-tabs button { color: #71717a; }
.topbar .builder-view-tabs button:hover,
.topbar .builder-view-tabs button.is-active { background: #ffffff; color: #7c5cfc; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 6px; }

/* ---- Left sidebar / pages panel ---- */
.pages-panel { background: #ffffff; border-right: 1px solid #ebebef; color: #1a1523; }
.pages-panel-header { border-bottom: 1px solid #ebebef; background: #ffffff; }
.pages-panel-header .section-toggle { color: #1a1523; background: transparent; border: 0; }
.pages-panel-header .section-toggle:hover { color: #7c5cfc; background: transparent; }
.section-toggle span { color: #a1a1aa; }
.settings-panel-header { border-top: 1px solid #ebebef; }
.templates-panel-header { border-top: 1px solid #ebebef; }

/* Page list items */
.page-item { color: #3f3f46; border-radius: 6px; border-color: transparent; }
.page-item small { color: #a1a1aa; }
.page-item:hover { border-color: #e4e0ff; background: #f4f3ff; color: #1a1523; }
.page-item.is-active { border-color: #c4b8fc; background: #f0eeff; color: #7c5cfc; }

/* Page settings form */
.page-settings { border-top: 1px solid #ebebef; background: #ffffff; }
.page-field { color: #3f3f46; }
.page-field small { color: #a1a1aa; }
.page-field label { color: #52525b; font-size: 12px; }
.page-hint { color: #a1a1aa; }
.page-settings input,
.page-settings select,
.page-settings textarea {
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #1a1523;
  border-radius: 6px;
}
.page-settings input:focus,
.page-settings select:focus,
.page-settings textarea:focus {
  border-color: #7c5cfc;
  box-shadow: 0 0 0 3px rgba(124,92,252,.12);
  outline: none;
}
.page-settings input:disabled,
.page-settings select:disabled { background: #f4f4f6; color: #a1a1aa; }
.page-settings button { border-color: #e4e4e7; background: #ffffff; color: #1a1523; }
.page-settings button:hover { background: #f4f4f6; }
.page-settings .danger-button { border-color: #fca5a5; background: #fff5f5; color: #dc2626; }

/* SEO settings inside page panel */
.seo-settings,
.form-submissions-panel { border-top: 1px solid #ebebef; }
.seo-settings-toggle,
.form-submissions-toggle { border-color: #e4e4e7; background: #f9f9fb; color: #1a1523; }
.seo-settings-toggle:hover,
.form-submissions-toggle:hover { border-color: #c4b8fc; background: #f4f3ff; }
.seo-settings-toggle span,
.form-submissions-toggle span { color: #a1a1aa; }
.seo-settings-toggle small,
.form-submissions-toggle small { color: #71717a; }
.seo-checkbox { color: #3f3f46; }
.seo-checkbox input { accent-color: #7c5cfc; }

/* Template actions */
.template-action-group button { border-color: #e4e4e7; background: #ffffff; color: #3f3f46; border-radius: 6px; }
.template-action-group button:hover { background: #f4f3ff; border-color: #c4b8fc; color: #7c5cfc; }

/* ---- Canvas controls (zoom / hand) ---- */
.canvas-controls { border-color: #e4e4e7; background: #ffffffee; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.canvas-controls button { color: #52525b; }
.canvas-controls button:hover { border-color: #e4e0ff; background: #f4f3ff; color: #1a1523; }
.canvas-controls button.is-active { border-color: #7c5cfc; background: #7c5cfc; color: #ffffff; }

/* Panel resizers */
.left-panel-resizer:after,
.right-panel-resizer:after { background: #e4e4e7; }
.left-panel-resizer:hover:after,
.right-panel-resizer:hover:after { background: #7c5cfc; }

/* ---- GrapeJS shell & canvas ---- */
.grapes-shell { background: #f0eff5; }
.gjs-cv-canvas { background: #eeedf5; }

/* ---- Right panel (blocks, styles, layers) ---- */
.gjs-pn-panel,
.gjs-pn-views,
.gjs-pn-views-container { background: #ffffff; border-color: #ebebef; }
.gjs-one-bg { background-color: #ffffff; }
.gjs-two-color { color: #1a1523; }
.gjs-three-bg { background-color: #f9f9fb; }
.gjs-four-color,
.gjs-four-color-h:hover { color: #7c5cfc; }
.gjs-pn-btn { color: #71717a; }
.gjs-pn-btn:hover,
.gjs-pn-btn.gjs-pn-active { color: #7c5cfc; }
.gjs-block { background: #ffffff; color: #1a1523; border-color: #ebebef; border-radius: 8px; }
.gjs-block:hover { background: #f4f3ff; border-color: #c4b8fc; }
.gjs-block-label { color: #52525b; font-size: 11px; }
.gjs-block-category .gjs-title { background: #f9f9fb; color: #52525b; border-bottom: 1px solid #ebebef; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.gjs-field,
.gjs-field input,
.gjs-field select,
.gjs-field textarea { background: #f9f9fb; border-color: #e4e4e7; color: #1a1523; border-radius: 4px; }
.gjs-field:focus-within { border-color: #7c5cfc; }
.gjs-sm-sector .gjs-sm-sector-title { background: #f9f9fb; color: #52525b; border-bottom: 1px solid #ebebef; }
.gjs-sm-label { color: #71717a; }
.gjs-layer { background: #ffffff; border-bottom: 1px solid #f0f0f0; color: #1a1523; }
.gjs-layer.gjs-selected { background: #f0eeff; }
.gjs-layer-title { color: #1a1523; }
.gjs-layer-count { color: #a1a1aa; }
.gjs-clm-tags { background: #ffffff; }
.gjs-clm-header { border-bottom: 1px solid #ebebef; color: #52525b; }
.gjs-trt-header { border-bottom: 1px solid #ebebef; color: #52525b; }
.gjs-trt-trait__label { color: #71717a; }

/* ---- Manager views (Data / Forms / Media / SEO / Publishing) ---- */
.data-manager,
.forms-manager,
.media-manager,
.seo-manager,
.publishing-manager { background: #f7f7f8; color: #1a1523; }

/* ---- lc-* design system components ---- */
.lc-button-primary { border-color: #7c5cfc; background: #7c5cfc; color: #ffffff; }
.lc-button-primary:hover:not(:disabled) { background: #6d4ef0; border-color: #6d4ef0; }
.lc-button-secondary { border-color: #e4e4e7; background: #ffffff; color: #1a1523; }
.lc-button-secondary:hover:not(:disabled) { background: #f4f4f6; }
.lc-button-ghost { color: #71717a; }
.lc-button-ghost:hover:not(:disabled) { background: #f4f4f6; color: #1a1523; }
.lc-panel,
.lc-empty-state { border-color: #ebebef; background: #ffffff; }
.lc-empty-state p { color: #71717a; }
.lc-eyebrow { color: #7c5cfc; }
.lc-page-header { color: #1a1523; }
.lc-page-header p:not(.lc-eyebrow) { color: #71717a; }

/* ---- Danger button (global) ---- */
.danger-button { border-color: #fca5a5; background: #fff5f5; color: #dc2626; }
.danger-button:hover { border-color: #f87171; color: #b91c1c; }

/* ================================================
   FINE-TUNING — Specific element fixes
   ================================================ */

/* Builder view tabs container */
.builder-view-tabs { background: #FAFAFC; border-color: #ebebef; }

/* Active / hover tab button */
.topbar .builder-view-tabs button:hover,
.topbar .builder-view-tabs button.is-active { background: #F5F3FC; color: #7c5cfc; box-shadow: none; }

/* Device selector (Desktop dropdown in canvas toolbar) */
.grapes-editor-wrap .gjs-devices-c .gjs-select select,
.grapes-editor-wrap .gjs-devices-c .gjs-field select {
  border: none;
  background: #FAFAFC;
  color: #888888;
}
.grapes-editor-wrap .gjs-devices-c .gjs-field { border: none; background: #FAFAFC; }

/* Device label ("Device") */
.grapes-editor-wrap .gjs-devices-c .gjs-device-label { color: #888888; }

/* Page item subtitle (path) */
.page-item small { color: #888888; }

/* ================================================
   GJS STYLE MANAGER & PANEL FINE-TUNING
   ================================================ */

/* ---- Dropdown arrow color ---- */
:root { --gjs-arrow-color: #888888; }
.gjs-field .gjs-d-s-arrow { border-top-color: #888888; }
.gjs-field-arrow-u,
.gjs-field-arrow-d { border-top-color: #888888; border-bottom-color: #888888; }
.gjs-field-unit { color: #888888; }

/* ---- Category / sector open border ---- */
.gjs-category-open,
.gjs-block-category.gjs-open,
.gjs-sm-sector.gjs-sm-open,
.gjs-trait-category.gjs-open { border-bottom: 1px solid #ebebef; }

/* ---- gjs-sm-sector — full light theme ---- */
.gjs-sm-sector { background: #ffffff; color: #1a1523; border-color: #ebebef; }

/* Sector title bar */
.gjs-sm-sector-title,
.gjs-category-title,
.gjs-block-category .gjs-title,
.gjs-trait-category .gjs-title {
  background: #f9f9fb;
  color: #52525b;
  border-bottom: 1px solid #ebebef;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.gjs-sm-sector-title:hover,
.gjs-block-category .gjs-title:hover,
.gjs-trait-category .gjs-title:hover { background: #f4f3ff; color: #7c5cfc; }

/* Caret icon */
.gjs-sm-sector-caret { color: #888888; }

/* Property labels */
.gjs-sm-label { color: #71717a; font-size: 11px; }
.gjs-sm-header { color: #71717a; }

/* Property fields */
.gjs-sm-property,
.gjs-sm-label,
.gjs-field,
.gjs-field input,
.gjs-field select,
.gjs-field textarea { color: #1a1523; }

.gjs-field,
.gjs-field input,
.gjs-field select,
.gjs-field textarea {
  background: #f9f9fb;
  border: 1px solid #e4e4e7;
  color: #1a1523;
  border-radius: 4px;
}
.gjs-field:focus-within { border-color: #7c5cfc; }

/* SM buttons (e.g. bold/italic toggles) */
.gjs-sm-property .gjs-sm-btn {
  background: #f4f4f6;
  color: #3f3f46;
  box-shadow: none;
  text-shadow: none;
  border: 1px solid #e4e4e7;
}
.gjs-sm-property .gjs-sm-btn:hover { background: #f4f3ff; color: #7c5cfc; border-color: #c4b8fc; }

/* Stack/layer rows inside SM */
.gjs-sm-layer { background: #f9f9fb; border: 1px solid #e4e4e7; border-radius: 4px; color: #1a1523; }
.gjs-sm-layer:hover { background: #f4f3ff; }
.gjs-sm-layer.gjs-sm-active { border-color: #c4b8fc; background: #f0eeff; }

/* Trait panel */
.gjs-trt-traits { color: #1a1523; }
.gjs-trt-trait { color: #3f3f46; }
.gjs-trt-trait .gjs-label { color: #71717a; }
.gjs-traits-label { border-bottom: 1px solid #ebebef; color: #52525b; }
.gjs-block-label,
.gjs-layer-title,
.gjs-clm-tags,
.gjs-trt-traits { color: #1a1523; }

/* Panel & block borders */
.gjs-pn-panel,
.gjs-block,
.gjs-sm-sector,
.gjs-layer { border-color: #ebebef; }

/* ================================================
   TARGETED FIXES — Round 9
   ================================================ */

/* ---- Builder theme primary action button ---- */
.builder-theme-actions button:first-child { background: #7c5cfc; border-color: #7c5cfc; color: #ffffff; }
.builder-theme-actions button:first-child:hover { background: #6d4ef0; border-color: #6d4ef0; }

/* ---- GJS block spacing ---- */
.gjs-block { margin-bottom: 10px; }

/* ---- Empty projects state ---- */
.empty-projects { border-color: #e8e8ed; background: #ffffff; }
.empty-projects h3 { color: #0f0f11; }
.empty-projects p { color: #71717a; }
.empty-projects button { background: #7c5cfc; border-color: #7c5cfc; color: #ffffff; }
.empty-projects button:hover { background: #6d4ef0; border-color: #6d4ef0; }

/* ---- Team role pill ---- */
.team-role-pill { background: #f0eeff; color: #7c5cfc; }

/* ---- Account meta pill ---- */
.account-meta { color: #71717a; }
.account-meta strong { background: #7c5cfc; color: #ffffff; }

/* ================================================
   LC-BACKGROUND LAYER EDITOR — FULL RETHEME
   ================================================ */

/* Outer container */
.lc-background-layer-editor {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  padding: 12px;
  color: #1a1523;
}

/* Heading row (drag handle, title, swatch, clear btn) */
.lc-background-layer-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #1a1523;
  font-weight: 700;
  font-size: 13px;
}
.lc-background-drag { color: #a1a1aa; cursor: grab; }
.lc-background-clear {
  border: 1px solid #e4e4e7;
  background: #f4f4f6;
  color: #71717a;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
}
.lc-background-clear:hover { border-color: #fca5a5; background: #fff5f5; color: #dc2626; }

/* Color swatch input */
.lc-background-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  background: transparent;
}

/* Mode tabs (Image / Color / Gradient) */
.lc-background-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #f4f4f6;
  padding: 3px;
}
.lc-background-mode-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  color: #71717a;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
}
.lc-background-mode-tabs button:hover { background: #ffffff; color: #1a1523; }
.lc-background-mode-tabs button[aria-pressed="true"] { background: #ffffff; color: #7c5cfc; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Pane (content area per mode) */
.lc-background-pane { display: grid; gap: 8px; }

/* Grid layout for fields */
.lc-background-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Individual field label + input pairs */
.lc-background-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #71717a;
  font-weight: 600;
}
.lc-background-field span { color: #71717a; font-size: 11px; font-weight: 600; }
.lc-background-field-wide { grid-column: 1 / -1; }

/* All inputs & selects inside */
.lc-background-field input[type="text"],
.lc-background-field input[type="number"],
.lc-background-field select,
.lc-background-image,
.lc-background-color-text,
.lc-background-angle,
.lc-background-repeat,
.lc-background-position,
.lc-background-attachment,
.lc-background-size {
  width: 100%;
  min-height: 32px;
  border: 1px solid #e4e4e7;
  border-radius: 5px;
  background: #f9f9fb;
  color: #1a1523;
  font-size: 12px;
  padding: 0 8px;
  box-sizing: border-box;
}
.lc-background-field input:focus,
.lc-background-field select:focus { border-color: #7c5cfc; outline: none; box-shadow: 0 0 0 3px rgba(124,92,252,.12); }
.lc-background-field input::placeholder { color: #a1a1aa; }

/* Color picker inputs */
.lc-background-color,
.lc-background-gradient-a,
.lc-background-gradient-b {
  width: 100%;
  height: 36px;
  border: 1px solid #e4e4e7;
  border-radius: 5px;
  padding: 2px;
  background: #ffffff;
  cursor: pointer;
}

/* Small hint text */
.lc-background-field small { color: #a1a1aa; font-size: 11px; font-weight: 400; }

/* ================================================
   COMPONENT PROPERTY FIELDS — FULL RETHEME
   ================================================ */

.component-property-field label { color: #52525b; font-size: 12px; font-weight: 700; }

.component-property-field input,
.component-property-field select,
.component-property-field textarea {
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #f9f9fb;
  color: #1a1523;
  font-size: 13px;
}
.component-property-field input:focus,
.component-property-field select:focus,
.component-property-field textarea:focus {
  border-color: #7c5cfc;
  outline: none;
  box-shadow: 0 0 0 2px rgba(124,92,252,.12);
}
.component-property-field input:disabled {
  border-color: #f0f0f2;
  background: #f4f4f6;
  color: #a1a1aa;
  cursor: not-allowed;
}
.component-property-field input::placeholder,
.component-property-field textarea::placeholder { color: #a1a1aa; }
.component-property-field small { color: #71717a; }

/* Binding group */
.component-property-binding-group { border-top: 1px solid #ebebef; }
.component-property-binding-header strong { color: #1a1523; }
.component-property-binding-header small,
.component-property-binding-target p,
.component-property-binding-empty { color: #71717a; }
.component-property-binding-target { border: 1px solid #e4e4e7; border-radius: 6px; background: #f9f9fb; }

/* ================================================
   COMPONENT PROPERTIES HEADER + SM COMPOSITE/STACK
   ================================================ */

/* ---- Component properties header ---- */
.component-properties-header { border-bottom: 1px solid #ebebef; background: #ffffff; }
.component-properties-header span { color: #7c5cfc; }
.component-properties-header strong { color: #888888; }
.component-properties-header button { border-color: #e4e4e7; background: #f9f9fb; color: #71717a; }
.component-properties-header button:hover { border-color: #c4b8fc; background: #f4f3ff; color: #7c5cfc; }

/* ---- gjs-sm-composite & gjs-sm-stack properties wrapper ---- */
.gjs-sm-composite .gjs-sm-properties,
.gjs-sm-stack .gjs-sm-properties { background: #f9f9fb; border-radius: 6px; padding: 8px 6px; }

/* Composite field wrapper */
.gjs-sm-field.gjs-sm-composite,
.gjs-sm-composite.gjs-clm-field,
.gjs-sm-composite.gjs-clm-select {
  background: #f4f4f6;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
}

/* Stack layer rows */
.gjs-sm-layer { background: #f4f4f6; border-radius: 6px; color: #1a1523; }
.gjs-sm-layer.gjs-sm-active { background: #f0eeff; }

/* Layer label & move handle */
.gjs-sm-layer #gjs-sm-label { color: #3f3f46; }
.gjs-sm-layer #gjs-sm-move { color: #a1a1aa; }
.gjs-sm-layer #gjs-sm-close-layer { color: #a1a1aa; }
.gjs-sm-layer #gjs-sm-close-layer:hover { color: #dc2626; opacity: 1; }

/* Add layer button */
.gjs-sm-stack #gjs-sm-add { color: #7c5cfc; opacity: 1; }
.gjs-sm-stack #gjs-sm-add:hover { color: #6d4ef0; }

/* ================================================
   MANAGER VIEWS + DATA / MEDIA / FORMS / SEO /
   PUBLISHING — FULL RETHEME
   ================================================ */

/* ---- Manager backgrounds ---- */
.data-manager,
.forms-manager,
.media-manager,
.seo-manager,
.ai-manager,
.publishing-manager { background: #f7f7f8; color: #1a1523; }

/* ================================================
   DATA MANAGER
   ================================================ */

.data-collection-item,
.data-detail-card,
.data-field-chip {
  border-color: #e8e8ed;
  background: #ffffff;
}
.data-collection-item { color: #1a1523; }
.data-collection-item span { color: #71717a; }
.data-collection-item small { color: #a1a1aa; }
.data-collection-item:hover,
.data-collection-item.is-active { border-color: #c4b8fc; background: #f0eeff; }

.data-detail-card { border-color: #e8e8ed; background: #ffffff; }
.data-detail-card h2 { color: #0f0f11; }
.data-detail-card p { color: #71717a; }

.data-field-chip { border-color: #e8e8ed; background: #ffffff; }
.data-field-chip strong { color: #1a1523; }
.data-field-chip span,
.data-field-chip small { color: #71717a; }

.data-field-editor-card {
  border: 1px solid #e8e8ed;
  border-radius: 8px;
  background: #ffffff;
}
.data-field-editor-actions span { color: #a1a1aa; }

.data-record-sort span { color: #71717a; }
.data-record-sort select {
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #1a1523;
}
.data-record-table th,
.data-record-table td { border-top-color: #ebebef; }
.data-record-table th { color: #a1a1aa; }
.data-record-table td { color: #1a1523; }

/* ================================================
   FORMS MANAGER
   ================================================ */

.forms-manager-header p:not(.workspace-eyebrow) { color: #71717a; }
.forms-manager-header button {
  border-color: #e4e4e7;
  background: #ffffff;
  color: #1a1523;
}
.forms-manager-header button:hover { background: #f4f3ff; border-color: #c4b8fc; }

.forms-list button {
  border-color: #e8e8ed;
  background: #ffffff;
  color: #1a1523;
}
.forms-list button:hover,
.forms-list button.is-active {
  border-color: #c4b8fc;
  background: #f0eeff;
  box-shadow: inset 3px 0 #7c5cfc;
}
.forms-list strong { color: #1a1523; }
.forms-list small,
.forms-list span { color: #a1a1aa; }

.forms-sidebar,
.form-detail-card,
.forms-empty-state {
  border-color: #e8e8ed;
  background: #ffffff;
}
.forms-empty-state p { color: #71717a; }
.forms-empty-state button {
  border-color: #e4e4e7;
  background: #7c5cfc;
  color: #ffffff;
}
.forms-empty-state button:hover { background: #6d4ef0; }

.form-card-actions span {
  background: #f0eeff;
  color: #7c5cfc;
}
.form-card-delete,
.submission-delete-button {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #dc2626;
}
.form-card-delete:hover,
.submission-delete-button:hover { border-color: #f87171; color: #b91c1c; }
.form-card-note { color: #a1a1aa; }

.form-detail-header {
  border-bottom-color: #ebebef;
  background: #f9f9fb;
}
.form-detail-header h2 { color: #0f0f11; }
.form-detail-header p { color: #71717a; }
.form-detail-header small { color: #a1a1aa; }

.form-settings-heading strong,
.form-section-heading strong { color: #1a1523; }
.form-settings-heading small,
.form-section-heading small { color: #71717a; }
.form-settings-heading button,
.form-settings-actions button {
  border-color: #c4b8fc;
  background: #f0eeff;
  color: #7c5cfc;
}
.form-settings-heading button:hover,
.form-settings-actions button:hover { background: #e8e1ff; }

.form-settings-section {
  border-color: #e8e8ed;
  background: #f9f9fb;
}
.form-settings-section h3 { color: #1a1523; }

/* ================================================
   MEDIA MANAGER
   ================================================ */

.media-card {
  border-color: #e8e8ed;
  background: #ffffff;
}
.media-card img { background: #f0eeff; }
.media-card h2 { color: #0f0f11; }
.media-card p { color: #71717a; }
.media-card code { color: #7c5cfc; }
.media-card-actions button {
  border-color: #e4e4e7;
  background: #ffffff;
  color: #1a1523;
}
.media-card-actions button:hover { background: #f4f4f6; border-color: #c4b8fc; }
.media-card-actions .danger-button {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #dc2626;
}

/* ================================================
   SEO MANAGER
   ================================================ */

.seo-audit-page-list button {
  border-color: #e8e8ed;
  background: #ffffff;
  color: #1a1523;
}
.seo-audit-page-list button:hover,
.seo-audit-page-list button.is-active { border-color: #c4b8fc; background: #f0eeff; }
.seo-audit-page-list button small,
.seo-audit-page-list button em { color: #71717a; }

.seo-audit-detail-header { border-bottom-color: #ebebef; }
.seo-audit-detail-header h2 { color: #0f0f11; }
.seo-audit-detail-header span { color: #71717a; }

.seo-audit-meta-grid div {
  border-color: #e8e8ed;
  background: #ffffff;
}
.seo-audit-meta-grid dt { color: #a1a1aa; }
.seo-audit-meta-grid dd { color: #1a1523; }

.seo-audit-issue {
  border-color: #e8e8ed;
  background: #ffffff;
}
.seo-audit-issue.is-critical { border-color: #fca5a5; }
.seo-audit-issue.is-warning { border-color: #fcd34d; }
.seo-audit-issue p,
.seo-audit-empty { color: #71717a; }

/* ================================================
   PUBLISHING MANAGER
   ================================================ */

.publishing-status-card,
.version-row {
  border-color: #e8e8ed;
  background: #ffffff;
}
.publishing-status-card h2,
.version-row h2 { color: #0f0f11; }
.publishing-status-card p,
.version-row p { color: #71717a; }
.publishing-status-card a,
.version-row button {
  border-color: #e4e4e7;
  background: #ffffff;
  color: #1a1523;
}
.publishing-status-card a:hover,
.version-row button:hover { background: #f4f4f6; }

.builder-theme-versions-heading button,
.builder-theme-version-row button {
  border-color: #e4e4e7;
  background: #ffffff;
  color: #1a1523;
}
.builder-theme-versions-heading button:hover,
.builder-theme-version-row button:hover { background: #f4f4f6; }

.builder-theme-version-row {
  border-color: #e8e8ed;
  background: #ffffff;
}
.builder-theme-version-row strong { color: #1a1523; }
.builder-theme-version-row span { color: #71717a; }