@import url('ms-liquid-glass.css?v=20260828_global_v3');
/**
 * MarketSync Master Design System
 * Official Brand Identity: MarketSync | "One dealership. One system." | DealerOS
 *
 * Single authoritative design-system layer for public marketing and DealerOS.
 * Native CSS Variables, semantic tokens, 8px grid, Manrope + Inter typography, accessibility rules.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS (PRIMITIVES)
   ========================================================================== */
:root {
  /* Brand Tokens — full blue scale anchored on the 3 brand-guide hexes at
     500/600/700 (the "primary/secondary/tertiary" swatches). 50-400 extend
     Tailwind's own well-tested blue scale (unspecified by the brand guide,
     used only for light tints); 800-950 darken toward this codebase's
     deep ink only (#0b1220 = --ms-blue-950). Dark canvas/surfaces stay --ms-dark-canvas #121318.
     -rgb companions let alpha-blended utilities (e.g. bg-indigo-950/40) use
     rgb(var(--ms-blue-950-rgb) / 40%) instead of a second hardcoded hex. */
  --ms-blue-50: #eff6ff;   --ms-blue-50-rgb: 239 246 255;
  --ms-blue-100: #dbeafe;  --ms-blue-100-rgb: 219 234 254;
  --ms-blue-200: #bfdbfe;  --ms-blue-200-rgb: 191 219 254;
  --ms-blue-300: #93c5fd;  --ms-blue-300-rgb: 147 197 253;
  --ms-blue-400: #60a5fa;  --ms-blue-400-rgb: 96 165 250;
  --ms-blue-500: #2563EB;  --ms-blue-500-rgb: 37 99 235;
  --ms-blue-600: #1F4ED8;  --ms-blue-600-rgb: 31 78 216;
  --ms-blue-700: #153AA6;  --ms-blue-700-rgb: 21 58 166;
  --ms-blue-800: #1e3a8a;  --ms-blue-800-rgb: 30 58 138;
  --ms-blue-900: #172554;  --ms-blue-900-rgb: 23 37 84;
  --ms-blue-950: #0b1220;  --ms-blue-950-rgb: 11 18 32;

  /* Neutral Light Primitives */
  --ms-white: #FFFFFF;
  --ms-warm-white: #F7F8FA;
  --ms-gray-50: #F9FAFB;
  --ms-gray-100: #F3F4F6;
  --ms-gray-200: #E5E7EB;
  --ms-gray-300: #D1D5DB;
  --ms-gray-400: #9CA3AF;
  --ms-gray-500: #6B7280;
  --ms-gray-600: #4B5563;
  --ms-gray-700: #374151;
  --ms-gray-800: #1F2937;
  --ms-graphite: #17191F;

  /* Dark Surface Primitives */
  --ms-dark-canvas: #121318;
  --ms-dark-surface-1: #1A1D24;
  --ms-dark-surface-2: #222630;
  --ms-dark-border: #2B303A;
  --ms-dark-border-strong: #3F4654;
  --ms-dark-text-primary: #F7F8FA;
  --ms-dark-text-secondary: #A5ACB8;

  /* Semantic Feedback Primitives */
  --ms-success-500: #10B981;
  --ms-success-600: #059669;
  --ms-success-bg-light: #ECFDF5;
  --ms-success-bg-dark: rgba(16, 185, 129, 0.15);

  --ms-warning-500: #F59E0B;
  --ms-warning-600: #D97706;
  --ms-warning-bg-light: #FFFBEB;
  --ms-warning-bg-dark: rgba(245, 158, 11, 0.15);

  --ms-danger-500: #EF4444;
  --ms-danger-600: #DC2626;
  --ms-danger-bg-light: #FEF2F2;
  --ms-danger-bg-dark: rgba(239, 68, 68, 0.15);

  --ms-info-500: #3B82F6;
  --ms-info-bg-light: #EFF6FF;
  --ms-info-bg-dark: rgba(59, 130, 246, 0.15);

  /* Typography Tokens */
  --font-primary: 'Manrope', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.875rem;    /* 14px */
  --text-sm: 1rem;        /* 16px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.75rem;    /* 44px */
  --text-display: 3.75rem;/* 60px */

  /* Spacing Scale (8px Logic) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius Tokens */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Depth & Shadows */
  --shadow-xs: 0 1px 2px rgba(23, 25, 31, 0.05);
  --shadow-sm: 0 2px 4px rgba(23, 25, 31, 0.08);
  --shadow-md: 0 8px 16px rgba(23, 25, 31, 0.10);
  --shadow-overlay: 0 24px 48px rgba(18, 19, 24, 0.35);

  /* Motion Tokens */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0.0, 1, 1);

  /* Z-Index Scale */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-header: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  /* Control Target Accessibility */
  --control-height-sm: 36px;
  --control-height-md: 42px;
  --control-height-lg: 48px;

  /* Default Light Theme Semantic Tokens */
  --color-bg: var(--ms-warm-white);
  --color-surface: var(--ms-white);
  --color-surface-raised: var(--ms-white);
  --color-surface-hover: var(--ms-gray-50);
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-border: #D9DEE8;
  --color-border-strong: #C4C9D4;

  --color-primary: var(--ms-blue-500);
  --color-primary-hover: var(--ms-blue-600);
  --color-primary-active: var(--ms-blue-700);
  --color-primary-soft: rgba(37, 99, 235, 0.08);
  --color-focus: var(--ms-blue-500);

  --color-success: var(--ms-success-600);
  --color-success-bg: var(--ms-success-bg-light);
  --color-warning: var(--ms-warning-600);
  --color-warning-bg: var(--ms-warning-bg-light);
  --color-danger: var(--ms-danger-600);
  --color-danger-bg: var(--ms-danger-bg-light);
  --color-info: var(--ms-info-500);
  --color-info-bg: var(--ms-info-bg-light);

  --color-link: var(--ms-blue-500);

  /* Department Default Accents */
  --department-accent: var(--ms-blue-500);
  --department-accent-soft: rgba(37, 99, 235, 0.1);
}

/* Connected Inventory Intelligence lives inside Inventory Pulse. */
[data-engine-mount="inv-intel"] .ms-inventory-intelligence > :first-child { display: none !important; }

.ms-inventory-intelligence,
.ms-inventory-intelligence #inv-intel-active-content,
.ms-inventory-intelligence #inv-intel-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Intelligence is a MarketSync product surface, not a separate violet brand. */
.ms-inventory-intelligence .text-violet-500,
.ms-inventory-intelligence .text-violet-600,
.ms-inventory-intelligence .text-violet-700,
.ms-inventory-intelligence .text-violet-800 {
  color: var(--ms-blue-600) !important;
}
.dark .ms-inventory-intelligence .dark\:text-violet-200,
.dark .ms-inventory-intelligence .dark\:text-violet-300,
.dark .ms-inventory-intelligence .dark\:text-violet-400 {
  color: var(--ms-blue-300) !important;
}
.ms-inventory-intelligence .bg-violet-600,
.ms-inventory-intelligence .bg-violet-700 {
  background-color: var(--ms-blue-600) !important;
}
.ms-inventory-intelligence .hover\:bg-violet-500:hover {
  background-color: var(--ms-blue-500) !important;
}
.ms-inventory-intelligence .border-violet-200,
.ms-inventory-intelligence .border-violet-300 {
  border-color: rgba(37,99,235,.25) !important;
}

.ms-inventory-intelligence :is(.bg-white,.bg-slate-50,.bg-violet-50,.bg-red-50,.bg-emerald-50,.bg-amber-50) {
  border-color: rgba(15,23,42,.14) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(241,246,252,.62)) !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter: blur(28px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(112%) !important;
}

.dark .ms-inventory-intelligence :is(.bg-white,.dark\:bg-slate-900,.dark\:bg-slate-950,.dark\:bg-slate-800\/60,.dark\:bg-violet-950\/30) {
  border-color: rgba(190,205,230,.14) !important;
  background: linear-gradient(145deg, rgba(27,39,63,.68), rgba(9,17,31,.56)) !important;
  box-shadow: 0 20px 52px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.09) !important;
}

.ms-inventory-intelligence :is(.overflow-x-auto,[class*="overflow-x-"]) {
  max-width: 100%;
  border-radius: 20px;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  [data-engine-mount="inv-intel"], .ms-inventory-intelligence,
  .ms-inventory-intelligence > *, .ms-inventory-intelligence #inv-intel-active-content > * {
    width: 100%; min-width: 0 !important; max-width: 100% !important;
  }
  .ms-inventory-intelligence .grid-cols-2,
  .ms-inventory-intelligence .grid-cols-3,
  .ms-inventory-intelligence .grid-cols-4 { grid-template-columns: minmax(0,1fr) !important; }
  .ms-inventory-intelligence :is(table,.min-w-full) { width: max-content; min-width: 100%; }
}

/* ==========================================================================
   2. DARK THEME SEMANTIC OVERRIDES
   ========================================================================== */
html.dark, [data-theme="dark"] {
  --color-bg: var(--ms-dark-canvas);
  --color-surface: var(--ms-dark-surface-1);
  --color-surface-raised: var(--ms-dark-surface-2);
  --color-surface-hover: #2A2F3B;
  --color-text: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-text-muted: #94A3B8;
  --color-border: var(--ms-dark-border);
  --color-border-strong: var(--ms-dark-border-strong);

  --color-primary: var(--ms-blue-500);
  --color-primary-hover: #3B82F6;
  --color-primary-active: #60A5FA;
  --color-primary-soft: rgba(37, 99, 235, 0.2);

  --color-success: #34D399;
  --color-success-bg: var(--ms-success-bg-dark);
  --color-warning: #FBBF24;
  --color-warning-bg: var(--ms-warning-bg-dark);
  --color-danger: #F87171;
  --color-danger-bg: var(--ms-danger-bg-dark);
  --color-info: #60A5FA;
  --color-info-bg: var(--ms-info-bg-dark);

  --color-link: #60A5FA;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. BASE STYLES & RESET REINFORCEMENT
   ========================================================================== */
body {
  margin: 0;
  font-family: var(--font-primary);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   4. TYPOGRAPHY SYSTEM
   ========================================================================== */
.ms-display { font-size: var(--text-display); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; color: var(--color-text); }
.ms-h1, h1 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; color: var(--color-text); }
.ms-h2, h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--color-text); }
.ms-h3, h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--color-text); }
.ms-h4, h4 { font-size: 0.9375rem; font-weight: 650; line-height: 1.35; color: var(--color-text); }
.ms-ui-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--color-text); }
.ms-body { font-size: var(--text-base); font-weight: 450; line-height: 1.5; color: var(--color-text); }
.ms-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.ms-meta { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.ms-sub { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); line-height: 1.4; }

/* Shared reading size. Paragraph copy starts at a true 16px across the public
   site and DealerOS; explicitly-sized display copy, captions and metadata keep
   their component scale. */
p { font-size: 1rem; line-height: 1.55; }

/* Systematic Contrast & Heading Overrides */
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4 {
  color: #0F172A;
}
html.dark h1, html.dark h2, html.dark h3, html.dark h4 {
  color: #F8FAFC;
}

/* Ensure headings & section titles do not look like faint grey body text */
html:not(.dark) .eng-section-title, html:not(.dark) .eng-card-title, html:not(.dark) .card-title {
  color: #0F172A;
  font-weight: 700;
}
html.dark .eng-section-title, html.dark .eng-card-title, html.dark .card-title {
  color: #F8FAFC;
  font-weight: 700;
}

/* Tab contrast enhancements */
.dept-tab-btn, .eng-tab-btn, [data-tab-btn] {
  font-weight: 600;
  transition: color 150ms ease, border-color 150ms ease;
}
html:not(.dark) .dept-tab-btn:not(.active), html:not(.dark) .eng-tab-btn:not(.active) {
  color: #475569;
}
html:not(.dark) .dept-tab-btn.active, html:not(.dark) .eng-tab-btn.active {
  color: #0F172A;
  font-weight: 700;
}
html.dark .dept-tab-btn:not(.active), html.dark .eng-tab-btn:not(.active) {
  color: #94A3B8;
}
html.dark .dept-tab-btn.active, html.dark .eng-tab-btn.active {
  color: #FFFFFF;
  font-weight: 700;
}

/* Form Label & Field typography */
html:not(.dark) label, html:not(.dark) .ms-field-label {
  color: #1E293B;
  font-weight: 600;
}
html.dark label, html.dark .ms-field-label {
  color: #E2E8F0;
  font-weight: 600;
}

/* Table Header & Cell Typography */
html:not(.dark) th {
  color: #475569;
  font-weight: 700;
}
html:not(.dark) td {
  color: #0F172A;
}
html.dark th {
  color: #CBD5E1;
  font-weight: 700;
}
html.dark td {
  color: #F8FAFC;
}

/* ==========================================================================
   5. BUTTON COMPONENT SYSTEM
   ========================================================================== */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-primary);
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.ms-btn-sm { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--text-xs); }
.ms-btn-md { height: var(--control-height-md); padding: 0 var(--space-4); font-size: var(--text-sm); }
.ms-btn-lg { height: var(--control-height-lg); padding: 0 var(--space-6); font-size: var(--text-base); }

.ms-btn-primary {
  background-color: var(--color-primary);
  color: var(--ms-white);
  box-shadow: var(--shadow-xs);
}
.ms-btn-primary:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
}
.ms-btn-primary:active {
  background-color: var(--color-primary-active);
}

.ms-btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.ms-btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-surface-hover);
}

.ms-btn-tertiary {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}
.ms-btn-tertiary:hover {
  background-color: rgba(37, 99, 235, 0.18);
}

.ms-btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
}
.ms-btn-ghost:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.ms-btn-danger {
  background-color: var(--color-danger);
  color: var(--ms-white);
}
.ms-btn-danger:hover {
  background-color: var(--ms-danger-600);
}

.ms-btn-icon {
  width: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0;
  border-radius: var(--radius-sm);
}

.ms-btn:disabled, .ms-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ==========================================================================
   6. INPUTS & FORM SYSTEM
   ========================================================================== */
.ms-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.ms-field-label {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.ms-input, .ms-select, .ms-textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text);
  height: var(--control-height-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.ms-textarea {
  height: auto;
  min-height: 90px;
  padding: var(--space-3);
}

.ms-input:focus, .ms-select:focus, .ms-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.ms-input.error, .ms-select.error {
  border-color: var(--color-danger);
}

/* ==========================================================================
   7. CARD & PANEL SYSTEM
   ========================================================================== */
.ms-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.ms-card-interactive {
  cursor: pointer;
}
.ms-card-interactive:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.ms-card-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ms-card-metric .value {
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-text);
}
.ms-card-metric .label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   8. TABLE SYSTEM (COMPACT & OPERATIONAL)
   ========================================================================== */
.ms-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.ms-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: var(--text-sm);
}

.ms-table th {
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.ms-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  background-color: var(--color-surface);
}

.ms-table tr:hover td {
  background-color: var(--color-surface-hover);
}

.ms-table-compact td, .ms-table-compact th {
  padding: var(--space-2) var(--space-3);
}

/* ==========================================================================
   9. BADGES & STATUS INDICATORS
   ========================================================================== */
.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ms-badge-neutral { background-color: var(--color-surface-hover); color: var(--color-text-secondary); }
.ms-badge-info { background-color: var(--color-info-bg); color: var(--color-info); }
.ms-badge-success { background-color: var(--color-success-bg); color: var(--color-success); }
.ms-badge-warning { background-color: var(--color-warning-bg); color: var(--color-warning); }
.ms-badge-danger { background-color: var(--color-danger-bg); color: var(--color-danger); }

/* ==========================================================================
   10. MODAL & DRAWER SYSTEM
   ========================================================================== */
.ms-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: rgba(18, 19, 24, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.ms-modal-shell {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-overlay);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ms-modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ms-modal-body {
  padding: var(--space-5);
  overflow-y: auto;
}

.ms-modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ==========================================================================
   11. EMPTY STATES & LOADING SKELETONS
   ========================================================================== */
.ms-empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  background-color: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.ms-skeleton {
  background: linear-gradient(90deg, var(--color-surface-hover) 25%, var(--color-border) 50%, var(--color-surface-hover) 75%);
  background-size: 200% 100%;
  animation: ms-skeleton-anim 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes ms-skeleton-anim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   12. STAFF CHAT MESSENGER/HANGOUTS DOCK & POPUP WINDOWS
   ========================================================================== */
.staff-chat-dock-bar {
  /* Anchored left (not right) so it never stacks on top of the Intelligence
     AI dock button (#ai-dock-btn, fixed bottom-5 right-5) in the same corner. */
  position: fixed;
  bottom: 0;
  left: 20px !important;
  right: auto !important;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}
.staff-chat-dock-bar > * {
  pointer-events: auto;
}

.staff-chat-head-btn {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
  position: relative;
}
.staff-chat-head-btn:hover {
  transform: translateY(-3px) scale(1.05);
}

.staff-chat-window {
  position: fixed !important;
  left: auto !important;
  right: 12px;
  bottom: 88px;
  width: min(360px, calc(100vw - 24px));
  height: min(440px, calc(100dvh - 160px));
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: height 200ms ease, transform 200ms ease;
  z-index: 10001;
}
@media (min-width: 768px) {
  .staff-chat-window {
    right: 24px;
    bottom: 88px;
    width: 360px;
  }
}
.staff-chat-window.minimized {
  height: 44px;
}

.staff-chat-header {
  padding: 10px 14px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.staff-chat-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-chat-bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
}
.staff-chat-bubble.mine {
  align-self: flex-end;
  background-color: var(--color-primary, #4f46e5);
  color: #ffffff;
  border-bottom-right-radius: 2px;
}
.staff-chat-bubble.theirs {
  align-self: flex-start;
  background-color: var(--color-surface-hover, #f1f5f9);
  color: var(--color-text, #0f172a);
  border-bottom-left-radius: 2px;
}

.staff-chat-reactions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.staff-chat-reaction-pill {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.emoji-picker-popover {
  position: absolute;
  bottom: 50px;
  right: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  z-index: 10000;
}
.emoji-picker-item {
  font-size: 18px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 120ms ease;
}
.emoji-picker-item:hover {
  background: var(--color-surface-hover);
}

/* ==========================================================================
   13. DEMO CONTROL CENTER
   Renders only for the one dedicated demo login (js/modules/demo-control-panel.js
   — visibility is decided server-side by GET /demo/control's 200/403, not CSS).
   ========================================================================== */
#demo-mode-badge {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* Above every product full-screen modal (the Video studio is z-99999, its player
     and sub-modals go up to z-9999999). The demo operator must be able to switch
     package/role/presentation at any time — including from inside a single-product
     surface like the Video studio — so this badge never gets buried. */
  z-index: 10000001;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--ms-blue-600, #1F4ED8);
  border: none;
  border-radius: 9999px;
  padding: 5px 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 78, 216, 0.4);
}
#header-demo-switcher-container #demo-mode-badge {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
  transition: background-color 0.15s ease;
}
#header-demo-switcher-container #demo-mode-badge:hover {
  background: #1d4ed8;
}
#demo-control-panel {
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000001;
  width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100dvh - 64px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
/* #demo-control-panel's own `display: flex` (author CSS) always wins over the
   browser's native `[hidden]{display:none}` UA rule regardless of specificity — UA
   rules are the lowest tier of the cascade. Without this, setting panel.hidden via JS
   (close button, badge toggle, outside click) has no visual effect. !important keeps
   this authoritative even if another author rule targets #demo-control-panel later. */
#demo-control-panel[hidden] {
  display: none !important;
}
.dcp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 2px;
}
.dcp-head-title {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 5px;
}
.dcp-close {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.dcp-close:hover {
  background: var(--color-surface-hover);
}
.dcp-dealer {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.dcp-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.dcp-section-label {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--color-text-secondary);
}
.dcp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.dcp-field-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#demo-control-panel .dcp-svg {
  display: block;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px;
  overflow: visible;
}
.dcp-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
}
.dcp-field select {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.dcp-divider {
  height: 1px;
  background: var(--color-border);
  margin: 1px 0;
}
.dcp-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.dcp-reset {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ms-danger-600, #DC2626);
  background: var(--ms-danger-bg-light, #FEF2F2);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}
.dcp-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dcp-note {
  font-size: 10px;
  color: var(--color-text-secondary);
}

@media (max-width: 420px) {
  #demo-control-panel {
    top: 46px;
    width: calc(100vw - 24px);
    max-width: 320px;
    padding: 12px;
  }
}

/* Presentation Mode — hide setup nags and internal/dev-only chrome so the sales
   demo stays visually clean on a laptop/tablet, without touching normal accounts. */
.ms-presentation-mode #setup-status-banner,
.ms-presentation-mode #setup-bar-host,
.ms-presentation-mode #ms-demo-reset,
.ms-presentation-mode #ms-mode-switch,
.ms-presentation-mode #idscan-btn {
  display: none !important;
}

/* ==========================================================================
   WEBSITE WORKSPACE FULL-SCREEN MODE & BUILDER THEME TOKENS
   ========================================================================== */
:root,
.ws-theme-dark {
  --ws-bg: #070B14;
  --ws-panel: #0D1527;
  --ws-panel-raised: #111B31;
  --ws-border: #1E293B;
  --ws-text: #FFFFFF;
  --ws-text-secondary: #D7DFEC;
  --ws-text-muted: #8F9BB3;
  --ws-accent: #6366F1;
  --ws-danger: #F43F5E;
  --ws-input-bg: #0F172A;
  --ws-input-border: #334155;
  --ws-input-text: #F8FAFC;
}

.ws-theme-light {
  --ws-bg: #F8FAFC;
  --ws-panel: #FFFFFF;
  --ws-panel-raised: #F1F5F9;
  --ws-border: #CBD5E1;
  --ws-text: #0F172A;
  --ws-text-secondary: #475569;
  --ws-text-muted: #64748B;
  --ws-accent: #4F46E5;
  --ws-danger: #E11D48;
  --ws-input-bg: #FFFFFF;
  --ws-input-border: #CBD5E1;
  --ws-input-text: #0F172A;
}

html.website-builder-mode,
body.website-builder-mode {
  background-color: var(--ws-bg, #0b0f19) !important;
  color: var(--ws-text, #f8fafc) !important;
  overflow: hidden !important;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Full-page Builder hides the global dashboard header */
.website-builder-mode body > header,
.website-builder-mode #dept-tabbar,
.website-builder-mode #dashboard-nav,
.website-builder-mode #dept-nav,
.website-builder-mode #nav-desktop,
.website-builder-mode #nav-reports-m,
.website-builder-mode #nav-more,
.website-builder-mode #staff-chat-dock-bar,
.website-builder-mode #setup-status-banner,
.website-builder-mode #report-rail,
.website-builder-mode #ai-dock-btn,
.website-builder-mode #ai-dock-panel,
.website-builder-mode #team-chat-dock-panel {
  display: none !important;
}

.website-builder-mode main {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.website-builder-mode div[data-page-content="website"] {
  display: flex !important;
  flex-direction: column !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Keep the floating builder rails inside the actual workspace viewport. The
   old max-height used the browser viewport while the builder itself has a
   shorter flex canvas, which clipped the lower inspector controls. */
.website-builder-mode .ws-studio-container {
  min-height: 0 !important;
}
.website-builder-mode .ws-studio-container > .relative.flex-1 {
  min-height: 0 !important;
}
.website-builder-mode #ws-left-dock-wrapper,
.website-builder-mode #ws-right-dock-wrapper {
  max-height: calc(100% - 1.5rem) !important;
  min-height: 0 !important;
}
.website-builder-mode #ws-left-drawer-content,
.website-builder-mode #ws-inspector-panel {
  max-height: none !important;
  min-height: 0 !important;
  height: calc(100% - 2.75rem) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.website-builder-mode #ws-left-drawer-content,
.website-builder-mode #ws-inspector-panel,
.website-builder-mode #ws-left-dock-wrapper nav {
  background: color-mix(in srgb, var(--ws-panel) 78%, transparent) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* Website Builder & Workspace Root Styling */
.website-builder-mode #website-root {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  background-color: var(--ws-bg, transparent) !important;
  color: var(--ws-text, inherit) !important;
}
.website-workspace-mode #website-root {
  display: flex !important;
  flex-direction: column !important;
  background-color: transparent !important;
}

/* ==========================================================================
   LIQUID GLASS DESIGN SYSTEM (Vibrant Glassmorphism, Specular Borders & Depth)
   ========================================================================== */

.liquid-glass-card,
.liquid-glass-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.7) 100%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(226, 232, 240, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
  border-radius: 20px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dark .liquid-glass-card,
.dark .liquid-glass-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 15, 30, 0.75) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 36px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

/* Liquid Glass Buttons */
.liquid-glass-btn,
.btn-liquid-glass,
.liquid-glass-btn-primary {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.92) 0%, rgba(99, 102, 241, 0.8) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 24px 0 rgba(79, 70, 229, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  border-radius: 12px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.liquid-glass-btn:hover,
.btn-liquid-glass:hover,
.liquid-glass-btn-primary:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.98) 0%, rgba(129, 140, 248, 0.9) 100%) !important;
  box-shadow: 0 12px 32px 0 rgba(79, 70, 229, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.65) !important;
  transform: translateY(-1px) scale(1.01) !important;
}

.liquid-glass-btn:active,
.btn-liquid-glass:active,
.liquid-glass-btn-primary:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: 0 4px 12px 0 rgba(79, 70, 229, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

/* Compact hero actions: horizontal breathing room without the oversized
   vertical block caused by inherited hero/button sizing rules. */
.website-open-builder-btn {
  padding: .5rem 1.25rem !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.25rem !important;
  font-size: .75rem !important;
  white-space: nowrap !important;
}

.liquid-glass-btn-secondary,
.btn-liquid-glass-secondary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dark .liquid-glass-btn-secondary,
.dark .btn-liquid-glass-secondary {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

.liquid-glass-btn-secondary:hover,
.btn-liquid-glass-secondary:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.8) 100%) !important;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-1px) !important;
}

.dark .liquid-glass-btn-secondary:hover,
.dark .btn-liquid-glass-secondary:hover {
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Glass input fields with high contrast */
.liquid-glass-input {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.dark .liquid-glass-input {
  background: rgba(10, 15, 28, 0.85) !important;
  border: 1px solid rgba(51, 65, 85, 0.9) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.liquid-glass-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  outline: none !important;
}

/* Header & Tabbar Seamless Flow (Removes Hard Horizontal Lines) */
#dept-tabbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
}

.dark #dept-tabbar {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(10, 15, 30, 0.8) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Website Property Inspector & Builder Chrome styling */
#ws-inspector-panel,
#ws-left-drawer-content,
#ws-inspector-content,
.ws-builder-chrome {
  background-color: var(--ws-panel) !important;
  color: var(--ws-text) !important;
  border-color: var(--ws-border) !important;
}

/* Property Inspector Text & Form Theme Rules */
#ws-inspector-panel label,
#ws-inspector-content label,
.ws-builder-label {
  color: var(--ws-text-secondary) !important;
}

#ws-inspector-panel h1,
#ws-inspector-panel h2,
#ws-inspector-panel h3,
#ws-inspector-panel h4,
#ws-inspector-content h1,
#ws-inspector-content h2,
#ws-inspector-content h3,
#ws-inspector-content h4 {
  color: var(--ws-text) !important;
}

#ws-inspector-panel p,
#ws-inspector-content p,
.ws-builder-subtext {
  color: var(--ws-text-muted) !important;
}

#ws-inspector-panel input[type="text"],
#ws-inspector-panel input[type="number"],
#ws-inspector-panel textarea,
#ws-inspector-panel select,
#ws-inspector-content input[type="text"],
#ws-inspector-content input[type="number"],
#ws-inspector-content textarea,
#ws-inspector-content select {
  background-color: var(--ws-input-bg) !important;
  color: var(--ws-input-text) !important;
  border-color: var(--ws-input-border) !important;
}

#ws-inspector-panel input::placeholder,
#ws-inspector-content input::placeholder,
#ws-inspector-panel textarea::placeholder,
#ws-inspector-content textarea::placeholder {
  color: var(--ws-text-muted) !important;
}

/* ==========================================================================
   WEBSITE BUILDER CENTRALIZED APPLICATION THEME SYSTEM
   ========================================================================== */

/* Dark Theme Tokens (Default) */
[data-ws-theme="dark"],
.ws-theme-dark {
  --ws-bg: #070B14 !important;
  --ws-panel: #0D1527 !important;
  --ws-panel-sub: #111A2E !important;
  --ws-panel-raised: #162036 !important;
  --ws-border: #1E293B !important;
  --ws-text: #F8FAFC !important;
  --ws-text-muted: #94A3B8 !important;
  --ws-text-secondary: #CBD5E1 !important;
  --ws-input-bg: #1E293B !important;
  --ws-input-text: #F8FAFC !important;
  --ws-input-border: #334155 !important;
  --ws-card-bg: #0F172A !important;
  --ws-hover-bg: #1E293B !important;
  --ws-active-bg: #1E1B4B !important;
  --ws-active-text: #818CF8 !important;
}

/* Light Theme Tokens */
[data-ws-theme="light"],
.ws-theme-light {
  --ws-bg: #F8FAFC !important;
  --ws-panel: #FFFFFF !important;
  --ws-panel-sub: #F1F5F9 !important;
  --ws-panel-raised: #F8FAFC !important;
  --ws-border: #E2E8F0 !important;
  --ws-text: #0F172A !important;
  --ws-text-muted: #64748B !important;
  --ws-text-secondary: #475569 !important;
  --ws-input-bg: #FFFFFF !important;
  --ws-input-text: #0F172A !important;
  --ws-input-border: #CBD5E1 !important;
  --ws-card-bg: #FFFFFF !important;
  --ws-hover-bg: #F1F5F9 !important;
  --ws-active-bg: #EEF2FF !important;
  --ws-active-text: #4F46E5 !important;
}

/* Base surface overrides */
[data-ws-theme] #website-root,
[data-ws-theme] div[data-page-content="website"] {
  background-color: var(--ws-bg) !important;
  color: var(--ws-text) !important;
}

[data-ws-theme] .ws-builder-header,
[data-ws-theme] .ws-top-action-bar,
[data-ws-theme] #ws-left-dock-wrapper nav,
[data-ws-theme] #ws-left-drawer-content,
[data-ws-theme] #ws-right-dock-wrapper,
[data-ws-theme] #ws-inspector-panel,
[data-ws-theme] #ws-inspector-content,
[data-ws-theme] .ws-builder-chrome,
[data-ws-theme] .ws-drawer-card {
  background-color: var(--ws-panel) !important;
  color: var(--ws-text) !important;
  border-color: var(--ws-border) !important;
}

[data-ws-theme] #ws-left-drag-header,
[data-ws-theme] #ws-inspector-drag-header,
[data-ws-theme] .ws-subpanel-header {
  background-color: var(--ws-panel-sub) !important;
  color: var(--ws-text) !important;
  border-color: var(--ws-border) !important;
}

[data-ws-theme] #ws-left-drag-header span,
[data-ws-theme] #ws-inspector-drag-header h3,
[data-ws-theme] #ws-left-drawer-content h3,
[data-ws-theme] #ws-inspector-panel h3 {
  color: var(--ws-text) !important;
}

[data-ws-theme] .ws-nav-rail-btn {
  color: var(--ws-text-muted) !important;
}

[data-ws-theme] .ws-nav-rail-btn:hover {
  color: var(--ws-text) !important;
  background-color: var(--ws-hover-bg) !important;
}

[data-ws-theme] .ws-nav-rail-btn.active,
[data-ws-theme] .ws-nav-rail-btn[data-tab].bg-indigo-600\/30 {
  background-color: var(--ws-active-bg) !important;
  color: var(--ws-active-text) !important;
  border-color: var(--ws-border) !important;
}

[data-ws-theme] #ws-left-drawer-content label,
[data-ws-theme] #ws-inspector-panel label,
[data-ws-theme] #ws-inspector-content label {
  color: var(--ws-text-secondary) !important;
}

[data-ws-theme] #ws-inspector-panel input[type="text"],
[data-ws-theme] #ws-inspector-panel input[type="number"],
[data-ws-theme] #ws-inspector-panel textarea,
[data-ws-theme] #ws-inspector-panel select,
[data-ws-theme] #ws-left-drawer-content input[type="text"],
[data-ws-theme] #ws-left-drawer-content input[type="search"],
[data-ws-theme] #ws-left-drawer-content textarea,
[data-ws-theme] #ws-left-drawer-content select {
  background-color: var(--ws-input-bg) !important;
  color: var(--ws-input-text) !important;
  border-color: var(--ws-input-border) !important;
}

[data-ws-theme] #ws-left-drawer-content .bg-slate-950,
[data-ws-theme] #ws-left-drawer-content .bg-slate-900,
[data-ws-theme] #ws-left-drawer-content .bg-slate-900\/60,
[data-ws-theme] #ws-left-drawer-content .bg-slate-950\/60,
[data-ws-theme] #ws-inspector-panel .bg-slate-900,
[data-ws-theme] #ws-inspector-panel .bg-slate-950 {
  background-color: var(--ws-card-bg) !important;
  border-color: var(--ws-border) !important;
}

.ws-theme-light #ws-frame-wrapper {
  border-color: #CBD5E1 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
}

/* Website Builder canvas quality fixes. Keep production sections full-bleed;
   their inner max-width wrappers still protect readable line lengths. The
   editor docks float above the canvas and must never make the site preview look
   like a narrow card on a desktop display. */
.website-builder-mode #ws-frame-wrapper[data-ws-device="desktop"] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.website-builder-mode #ws-frame-wrapper[data-ws-device="tablet"] {
  width: min(768px, calc(100vw - 2rem)) !important;
  height: 92% !important;
  border-radius: 1rem !important;
  border: 4px solid #475569 !important;
}
.website-builder-mode #ws-frame-wrapper[data-ws-device="mobile"] {
  width: min(375px, calc(100vw - 2rem)) !important;
  height: 92% !important;
  border-radius: 1.5rem !important;
  border: 4px solid #475569 !important;
}
.website-builder-mode #ws-preview-frame {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}
.website-builder-mode .ws-studio-container #ws-inspector-panel,
.website-builder-mode .ws-studio-container #ws-left-drawer-content {
  color: var(--ws-text) !important;
  text-shadow: none !important;
}
.website-builder-mode .ws-studio-container #ws-inspector-panel .text-slate-900,
.website-builder-mode .ws-studio-container #ws-inspector-panel .text-slate-800,
.website-builder-mode .ws-studio-container #ws-left-drawer-content .text-slate-900,
.website-builder-mode .ws-studio-container #ws-left-drawer-content .text-slate-800 {
  color: var(--ws-text) !important;
}
.website-builder-mode .ws-studio-container #ws-inspector-panel .text-slate-500,
.website-builder-mode .ws-studio-container #ws-inspector-panel .text-slate-400,
.website-builder-mode .ws-studio-container #ws-left-drawer-content .text-slate-500,
.website-builder-mode .ws-studio-container #ws-left-drawer-content .text-slate-400 {
  color: var(--ws-text-muted) !important;
}
.website-builder-mode .ws-studio-container .liquid-glass-input,
.website-builder-mode .ws-studio-container .liquid-glass-card,
.website-builder-mode .ws-studio-container .liquid-glass-panel {
  color: var(--ws-text) !important;
}
@media (max-width: 768px) {
  .website-builder-mode .ws-top-action-bar {
    align-items: stretch !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    min-height: 52px !important;
  }
  .website-builder-mode .ws-top-action-bar > * { flex-shrink: 0 !important; }
  .website-builder-mode #ws-left-dock-wrapper,
  .website-builder-mode #ws-right-dock-wrapper {
    top: .5rem !important;
    max-height: calc(100% - 1rem) !important;
  }
  .website-builder-mode #ws-left-drawer-content,
  .website-builder-mode #ws-inspector-panel {
    width: min(86vw, 330px) !important;
    max-width: calc(100vw - 4rem) !important;
  }
  .website-builder-mode #ws-left-dock-wrapper { left: .5rem !important; }
  .website-builder-mode #ws-right-dock-wrapper { right: .5rem !important; }
  .website-builder-mode #ws-frame-wrapper[data-ws-device="desktop"] { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; }
  .website-builder-mode #ws-frame-wrapper[data-ws-device="tablet"] { width: calc(100vw - 1rem) !important; max-width: calc(100vw - 1rem) !important; }
  .website-builder-mode #ws-frame-wrapper[data-ws-device="mobile"] { width: min(375px, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; }
}

/* Website Builder editor chrome: keep the preview expressive, but make the
 * controls calm, opaque, and readable. The editor is a work surface, not a
 * translucent marketing card. This intentionally overrides the global glass
 * treatment only inside builder mode. */
.website-builder-mode {
  --ws-panel: #101b31;
  --ws-panel-raised: #182641;
  --ws-border: #344766;
  --ws-text: #f8fafc;
  --ws-text-secondary: #dbe7f5;
  --ws-text-muted: #a8b7cc;
  --ws-input-bg: #0b1426;
  --ws-input-border: #405577;
  --ws-input-text: #f8fafc;
}
.website-builder-mode .ws-top-action-bar,
.website-builder-mode #ws-left-dock-wrapper nav,
.website-builder-mode #ws-left-drawer-content,
.website-builder-mode #ws-right-dock-wrapper > div,
.website-builder-mode #ws-inspector-panel {
  background: var(--ws-panel) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--ws-border) !important;
  color: var(--ws-text) !important;
  box-shadow: 0 12px 28px rgba(2, 8, 23, .34) !important;
}
.website-builder-mode #ws-left-drawer-content,
.website-builder-mode #ws-inspector-panel {
  opacity: 1 !important;
}
.website-builder-mode .ws-top-action-bar button,
.website-builder-mode .ws-top-action-bar select,
.website-builder-mode #ws-right-collapse-btn,
.website-builder-mode #ws-left-collapse-btn,
.website-builder-mode .ws-device-btn,
.website-builder-mode .ws-nav-rail-btn {
  text-shadow: none !important;
  filter: none !important;
}
.website-builder-mode .ws-top-action-bar button:not(.bg-indigo-600),
.website-builder-mode .ws-top-action-bar select,
.website-builder-mode #ws-right-collapse-btn,
.website-builder-mode #ws-left-collapse-btn {
  background: var(--ws-panel-raised) !important;
  color: var(--ws-text-secondary) !important;
  border-color: var(--ws-border) !important;
}
.website-builder-mode .ws-top-action-bar button:not(.bg-indigo-600):hover,
.website-builder-mode #ws-right-collapse-btn:hover,
.website-builder-mode #ws-left-collapse-btn:hover {
  background: #223453 !important;
  color: #fff !important;
}
.website-builder-mode .ws-top-action-bar .bg-indigo-600,
.website-builder-mode .ws-device-btn.bg-indigo-600 {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28) !important;
}
.website-builder-mode #ws-left-drawer-content input,
.website-builder-mode #ws-left-drawer-content select,
.website-builder-mode #ws-left-drawer-content textarea,
.website-builder-mode #ws-inspector-panel input,
.website-builder-mode #ws-inspector-panel select,
.website-builder-mode #ws-inspector-panel textarea {
  background: var(--ws-input-bg) !important;
  color: var(--ws-input-text) !important;
  border-color: var(--ws-input-border) !important;
}
.website-builder-mode #ws-left-drawer-content input::placeholder,
.website-builder-mode #ws-inspector-panel input::placeholder,
.website-builder-mode #ws-inspector-panel textarea::placeholder {
  color: #8fa2bd !important;
  opacity: 1 !important;
}
.website-builder-mode #ws-left-drawer-content .liquid-glass-card,
.website-builder-mode #ws-inspector-panel .liquid-glass-card,
.website-builder-mode #ws-left-drawer-content .liquid-glass-panel,
.website-builder-mode #ws-inspector-panel .liquid-glass-panel {
  background: var(--ws-panel-raised) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--ws-border) !important;
  box-shadow: none !important;
}
.website-builder-mode #ws-left-drawer-content .text-slate-500,
.website-builder-mode #ws-left-drawer-content .text-slate-400,
.website-builder-mode #ws-inspector-panel .text-slate-500,
.website-builder-mode #ws-inspector-panel .text-slate-400 {
  color: var(--ws-text-muted) !important;
}
@media (max-width: 900px) {
  .website-builder-mode #ws-left-dock-wrapper,
  .website-builder-mode #ws-right-dock-wrapper { max-width: calc(100vw - 1rem); }
  .website-builder-mode #ws-left-drawer-content { width: min(290px, calc(100vw - 4.5rem)) !important; }
  .website-builder-mode #ws-inspector-panel { width: min(320px, calc(100vw - 3rem)) !important; }
  .website-builder-mode .ws-top-action-bar { padding-left: .65rem !important; padding-right: .65rem !important; gap: .4rem !important; }
  .website-builder-mode .ws-top-action-bar > div { min-width: 0; }
  .website-builder-mode .ws-top-action-bar button,
  .website-builder-mode .ws-top-action-bar select { min-height: 34px; }
}

/* Builder contrast and glass regression guard.  The dashboard's generic
   `.dark`/`.text-slate-*` utilities can win against the builder's design
   tokens, leaving light mode with low-contrast navy panels and unreadable
   glass controls. Keep this scoped to the editor so production sites retain
   their own theme CSS. */
[data-ws-theme="light"].website-builder-mode .ws-builder-header,
[data-ws-theme="light"].website-builder-mode .ws-top-action-bar,
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel,
[data-ws-theme="light"].website-builder-mode #ws-left-dock-wrapper nav {
  color: #0f172a !important;
}
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel,
[data-ws-theme="light"].website-builder-mode #ws-left-dock-wrapper nav,
[data-ws-theme="light"].website-builder-mode .liquid-glass-card,
[data-ws-theme="light"].website-builder-mode .liquid-glass-panel {
  background: rgba(255, 255, 255, .94) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .text-slate-900,
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .text-slate-800,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .text-slate-900,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .text-slate-800 { color: #0f172a !important; }
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .text-slate-500,
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .text-slate-400,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .text-slate-500,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .text-slate-400 { color: #475569 !important; }
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .bg-slate-950,
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .bg-slate-900,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .bg-slate-950,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .bg-slate-900 { background: #f8fafc !important; color: #0f172a !important; }
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content button,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel button { text-shadow: none !important; }

/* Website Builder chrome sizing guard. The editor rails are overlays, so a
   generic `w-64`/text-xs utility must not be allowed to collapse them into
   unreadable strips or clip the inspector off the viewport. */
.website-builder-mode #ws-left-dock-wrapper,
.website-builder-mode #ws-right-dock-wrapper {
  top: 1rem !important;
  max-width: calc(100vw - 2rem) !important;
}
.website-builder-mode #ws-left-dock-wrapper { left: 1rem !important; }
.website-builder-mode #ws-right-dock-wrapper { right: 1rem !important; }
.website-builder-mode #ws-left-dock-wrapper > nav {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  padding: .65rem .35rem !important;
  gap: .4rem !important;
}
.website-builder-mode #ws-left-dock-wrapper > nav .ws-nav-rail-btn,
.website-builder-mode #ws-left-dock-wrapper > nav #ws-left-collapse-btn {
  width: 2.7rem !important;
  min-width: 2.7rem !important;
  height: 2.7rem !important;
  min-height: 2.7rem !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.website-builder-mode #ws-left-drawer-content {
  width: min(20rem, calc(100vw - 7rem)) !important;
  min-width: min(20rem, calc(100vw - 7rem)) !important;
}
.website-builder-mode #ws-inspector-panel {
  width: min(22rem, calc(100vw - 3rem)) !important;
  min-width: min(22rem, calc(100vw - 3rem)) !important;
}
.website-builder-mode .ws-top-action-bar button,
.website-builder-mode .ws-top-action-bar select {
  min-height: 2rem !important;
  white-space: nowrap !important;
}
.website-builder-mode .ws-top-action-bar { min-height: 3.25rem !important; }
@media (max-width: 768px) {
  .website-builder-mode #ws-left-dock-wrapper { left: .5rem !important; }
  .website-builder-mode #ws-right-dock-wrapper { right: .5rem !important; }
  .website-builder-mode #ws-left-drawer-content,
  .website-builder-mode #ws-inspector-panel { min-width: 0 !important; }
  .website-builder-mode #ws-left-drawer-content { width: min(86vw, 21rem) !important; }
  .website-builder-mode #ws-inspector-panel { width: min(86vw, 22rem) !important; }
}

/* Shared Liquid Glass dashboard chrome and bold Apple-style workspace headers.
   Re-declared (identically) in the "Liquid Glass workspace layer" block below —
   that duplication predates this merge; harmless in CSS (last write wins, same
   values), left as-is rather than risk trimming something still relied upon. */
:root {
  --ms-bg: #e8ecf2;
  --ms-surface: rgba(255, 255, 255, 0.85);
  --ms-surface-solid: #f3f5f8;
  --ms-text: #17191f;
  --ms-text-muted: #687386;
  --ms-border: rgba(23, 25, 31, 0.12);
  --ms-primary: #2563eb;
  --ms-primary-hover: #1f4ed8;
  --ms-accent: #2563EB;
  --ms-glass-blur: 24px;
  --ms-radius-card: 20px;
  --ms-radius-control: 12px;
  --ms-shadow-glass: 0 16px 40px rgba(23, 25, 31, 0.08);
}
.dark { --ms-bg:#0f1117; --ms-surface:rgba(26,29,36,.76); --ms-surface-solid:#1a1d24; --ms-text:#f7f8fa; --ms-text-muted:#a5acb8; --ms-border:rgba(255,255,255,.12); --ms-shadow-glass:0 16px 40px rgba(0,0,0,.22); }
.ms-glass, .ms-card { background:var(--ms-surface); border:1px solid var(--ms-border); border-radius:var(--ms-radius-card); box-shadow:var(--ms-shadow-glass); backdrop-filter:blur(var(--ms-glass-blur)); -webkit-backdrop-filter:blur(var(--ms-glass-blur)); }
.ms-button-primary { background:var(--ms-primary); color:#fff; border-radius:var(--ms-radius-control); }
.ms-button-primary:hover { background:var(--ms-primary-hover); }
body.ms-app-booting, body.ms-app-booting main { background:var(--ms-bg) !important; }
body.ms-app-booting > header { background:var(--ms-surface) !important; border-color:var(--ms-border) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 8px 24px rgba(23,25,31,.06); }
#dept-sidebar, #nav-desktop, #nav-mobile, #report-rail { background:var(--ms-surface) !important; border-color:var(--ms-border) !important; }
.ms-suite-nav-header,
.ms-product-nav-item,
.ms-suite-nav-item { border-color:var(--ms-border); }
.ms-suite-nav-header { background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12)); border:1px solid var(--ms-border); border-radius:var(--ms-radius-control); box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.ms-suite-nav-item:hover,
.ms-product-nav-item:hover { background:rgba(255,255,255,.24) !important; }
.ms-engine-header { padding:clamp(1rem,2vw,1.5rem); border:1px solid var(--ms-border); border-radius:var(--ms-radius-card); background:var(--ms-surface); box-shadow:var(--ms-shadow-glass); backdrop-filter:blur(var(--ms-glass-blur)); -webkit-backdrop-filter:blur(var(--ms-glass-blur)); }
.ms-engine-title { font-size:clamp(2rem,4vw,3.5rem) !important; line-height:.98 !important; letter-spacing:-.055em !important; font-weight:900 !important; font-family:Manrope,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#service-overview-root .rounded-2xl, #parts-overview-root .rounded-2xl { border-radius:var(--ms-radius-card); }
#service-overview-root .bg-white, #parts-overview-root .bg-white { background:var(--ms-surface) !important; border-color:var(--ms-border) !important; }
#service-overview-root button, #parts-overview-root button { border-radius:var(--ms-radius-control); }
@media (max-width:767px) { .ms-engine-header { padding:1rem; } .ms-engine-title { font-size:2.25rem !important; } }
@media (prefers-reduced-motion:reduce) { .ms-glass *, .ms-card *, #service-overview-root *, #parts-overview-root * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ──────────────────────────────────────────────────────────────────────────
   Liquid Glass workspace layer
   Shared presentation for operational Pulse dashboards. These classes are
   intentionally additive: existing engine markup, data loading, click
   handlers, role gates, and API contracts remain unchanged.
────────────────────────────────────────────────────────────────────────── */
:root {
  --ms-bg: #e8ecf2;
  --ms-surface: rgba(255, 255, 255, 0.85);
  --ms-surface-solid: #f3f5f8;
  --ms-text: #17191f;
  --ms-text-muted: #687386;
  --ms-border: rgba(23, 25, 31, 0.12);
  --ms-primary: #2563eb;
  --ms-primary-hover: #1f4ed8;
  --ms-accent: #2563EB;
  --ms-glass-blur: 24px;
  --ms-radius-card: 20px;
  --ms-radius-control: 12px;
  --ms-shadow-glass: 0 16px 40px rgba(23, 25, 31, 0.08);
  --ms-s-glass: rgba(255, 255, 255, 0.78);
  --ms-g-border: rgba(15, 23, 42, 0.10);
  --ms-g-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.dark {
  --ms-bg: #0f1117;
  --ms-surface: rgba(26, 29, 36, 0.76);
  --ms-surface-solid: #1a1d24;
  --ms-text: #f7f8fa;
  --ms-text-muted: #a5acb8;
  --ms-border: rgba(255, 255, 255, 0.12);
  --ms-shadow-glass: 0 16px 40px rgba(0, 0, 0, 0.22);
  --ms-s-glass: rgba(15, 23, 42, 0.55);
  --ms-g-border: rgba(255, 255, 255, 0.10);
  --ms-g-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ms-glass {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  backdrop-filter: blur(var(--ms-glass-blur));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur));
  box-shadow: var(--ms-shadow-glass);
  border-radius: var(--ms-radius-card);
}

.ms-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card);
  box-shadow: var(--ms-shadow-glass);
}

.ms-button-primary {
  background: var(--ms-primary);
  color: #fff;
  border-radius: var(--ms-radius-control);
}

.ms-button-primary:hover { background: var(--ms-primary-hover); }

/* Pulse shells: preserve existing utility behavior while giving every
   Service/Parts information surface one coherent visual treatment. */
#service-overview-root > .engine-shell,
#parts-overview-root > .engine-shell,
#service-overview-root .pulse-panel,
#parts-overview-root .pulse-panel {
  background: var(--ms-surface) !important;
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-glass) !important;
  backdrop-filter: blur(var(--ms-glass-blur));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur));
}

#service-overview-root > div > .bg-white,
#parts-overview-root > div > .bg-white,
#service-overview-root .bg-white,
#parts-overview-root .bg-white {
  background-color: var(--ms-surface) !important;
  border-color: var(--ms-border) !important;
}

#service-overview-root .rounded-2xl,
#parts-overview-root .rounded-2xl { border-radius: var(--ms-radius-card); }

#service-overview-root button,
#parts-overview-root button { border-radius: var(--ms-radius-control); }

#service-overview-root input,
#service-overview-root select,
#service-overview-root textarea,
#parts-overview-root input,
#parts-overview-root select,
#parts-overview-root textarea {
  border-radius: var(--ms-radius-control);
  border-color: var(--ms-border);
}

@media (prefers-reduced-motion: reduce) {
  .ms-glass *,
  #service-overview-root *,
  #parts-overview-root * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Final dashboard glass cascade. Keep this last so legacy Tailwind repaint
   compatibility selectors cannot turn the authenticated shell opaque again.
   Un-scoped from [data-page-content] so body-level overlays (modals, context
   menus, and Design Studio's own full-screen chrome — all appended straight
   to <body>, outside any [data-page-content] wrapper) get the same glass
   treatment as everything rendered into a page — not just page content.
   Design Studio's artboard/canvas surface is the one deliberate exception:
   it has to render the actual design at true, unblurred color, so it's
   excluded and stays solid. */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(37,99,235,.14), transparent 32rem),
    radial-gradient(circle at 88% 18%, rgba(124,58,237,.12), transparent 30rem),
    var(--ms-bg) !important;
}

#nav-desktop,
#nav-mobile,
#report-rail,
.ms-engine-header,
.ms-glass {
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.58)) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.11) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}

.dark body,
.dark body main { background-color:#0b1020 !important; }

.dark #nav-desktop,
.dark #nav-mobile,
.dark #report-rail,
.dark .ms-engine-header,
.dark .ms-glass,
.dark .ms-card {
  background: linear-gradient(135deg, rgba(30,41,72,.58), rgba(15,23,42,.40)) !important;
  border-color: rgba(148,163,184,.20) !important;
}

/* ── Liquid Glass is OPT-IN ──────────────────────────────────────────────────
   Glass used to be applied by `.bg-white:not(#studio-artboard-container)`, a
   blanket selector that caught all 1,297 bg-white call sites: every KPI tile,
   every record card, every dense table, on every page. That is why light mode
   read as milky, why cards looked equally important regardless of what they
   held, and why a repair-order table sat behind blur(20px).

   Glass now belongs only to surfaces that genuinely FLOAT above content — the
   header, the sidebar, nav, the report rail, .ms-engine-header and anything
   explicitly marked .ms-glass / .ms-c--glass. Cards keep their own solid
   Tailwind background, which is what a content surface should be. Depth comes
   from the tinted page background behind them, not from blurring the page
   through them.

   If a card needs to read as elevated, give it .ms-c--elevated. Do not bring
   back a selector that decides material by colour class.
   ─────────────────────────────────────────────────────────────────────────── */

/* Notebook Pulse composition shared by Executive, Sales, F&I, Service and Parts. */
.ms-pulse-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(.85rem, 1.4vw, 1.25rem);
  row-gap: clamp(1.35rem, 2.2vw, 2rem);
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: clip;
  padding: clamp(.875rem, 1.35vw, 1.25rem);
  /* The board is layout, not a card. Painting a second full-height glass
     surface here created the vertical seam visible between Pulse sections. */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.page-content.hidden.ms-pulse-board { display: none; }

.ms-pulse-board > * {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ms-pulse-board > .grid {
  min-width: 0;
  gap: clamp(.75rem, 1.1vw, 1rem) !important;
}

.ms-pulse-board .grid > * { min-width: 0; }

.pulse-summary-panel {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(.875rem, 1.35vw, 1.25rem);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card);
  background: color-mix(in srgb, var(--ms-surface-solid) 92%, transparent);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(var(--ms-glass-blur));
  backdrop-filter: blur(var(--ms-glass-blur));
}

/* The Pulse tile row is laid out by the design system, which sizes each tile
   from its own data (see "PULSE KPI HIERARCHY" in ms-design-system.css). The
   equal-width auto-fit grid that used to live here is what made five tiles of
   wildly different urgency read as five of the same thing. */

@media (max-width: 639px) {
  .ms-pulse-board,
  .pulse-summary-panel {
    padding: .75rem;
    border-radius: 18px;
  }

  .ms-pulse-board {
    row-gap: 1.125rem;
  }
}
/* Glass belongs to things that are already CARDS. A blanket `details` selector also
   caught the bare, padding-less wrappers the Pulse composes with — engSection()'s
   `<details class="group mt-7">` (a heading + content, no chrome of its own) and the
   layout wrappers enableExecutivePulseDisclosures() promotes — so each one grew a
   glass panel with zero padding: the section title sat flush in the box's top-left
   corner and its content bled to the edges ("the titles are not inside nicely"). It
   also painted over the dark AI panel's own gradient. Real cards (engCard, the rail,
   the department sections) all carry bg-white/dark:bg-slate-900 and are matched by
   the selectors above them, so they keep the glass. */
.ms-pulse-board .bg-white:not(.ms-kpi),
.ms-pulse-board .dark\:bg-slate-900:not(.ms-kpi),
[data-engine-rail] details {
  border-radius: var(--ms-radius-card) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.58)) !important;
  border-color: rgba(255,255,255,.19) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

.dark .ms-pulse-board .bg-white:not(.ms-kpi),
.dark .ms-pulse-board .dark\:bg-slate-900:not(.ms-kpi),
.dark [data-engine-rail] details {
  background: linear-gradient(145deg, rgba(30,41,72,.56), rgba(15,23,42,.38)) !important;
  border-color: rgba(148,163,184,.18) !important;
}

.ms-pulse-board h2,
.ms-pulse-board h3,
[data-engine-rail] summary {
  letter-spacing: -.018em;
  font-weight: 900 !important;
}

.ms-pulse-board > .grid:first-of-type > * {
  /* Let content determine card height. A fixed minimum made empty states
     look like oversized blank tiles and pushed lower dashboard rows down. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ms-pulse-board button,
[data-engine-rail] button { border-radius: var(--ms-radius-control) !important; }

/* Pulse keeps the engine's native two-column shell at desktop widths: a wide
   operating canvas plus the compact Reports / Next Actions / Quick Actions rail. */
[data-engine-body] + [data-engine-rail] {
  align-self: start;
  min-width: 0;
}

.ms-engine-layout {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .ms-engine-layout--rail {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }
}

/* Pulse keeps the operations rail as a right-hand COLUMN, like every other tab.
   It was briefly collapsed into a full-width strip above the board to buy the
   board more width; Reports, Next Actions and Quick Actions belong beside the
   board, not stacked above it, so the rail stays where it is. The board still
   fills its own column — the "boxed" look it used to have came from padding-less
   wrappers picking up a glass box, which is fixed separately. */

@media (min-width: 1024px) {
  .ms-pulse-board[data-pulse-kind="sales"] > .grid:last-child,
  .ms-pulse-board[data-pulse-kind="service-overview"] > .grid:last-child,
  .ms-pulse-board[data-pulse-kind="parts-overview"] > .grid:last-child {
    gap: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  .ms-pulse-board { grid-template-columns: 1fr; gap: .8rem; }
  .ms-pulse-board > * { grid-column: 1; }
  .ms-pulse-board > .grid:first-of-type > * { min-height: 5.75rem; }
}

/* Larger editorial headers and icon-led glass tabs. */
.ms-engine-header {
  padding: clamp(1.4rem, 2.8vw, 2.4rem) !important;
  min-height: 8.75rem;
  align-items: center !important;
}

.ms-engine-header > div:first-child { gap: clamp(1rem, 1.8vw, 1.5rem) !important; }

.ms-engine-mark {
  width: clamp(3.75rem, 6vw, 5rem) !important;
  height: clamp(3.75rem, 6vw, 5rem) !important;
  border-radius: 1.35rem !important;
  border: 1px solid currentColor;
  box-shadow: 0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.ms-engine-mark svg { width: clamp(1.7rem, 3vw, 2.35rem) !important; height: clamp(1.7rem, 3vw, 2.35rem) !important; stroke-width: 2; }

.ms-engine-title {
  font-size: clamp(2.5rem, 4vw, 4rem) !important;
  line-height: .96 !important;
  letter-spacing: -.052em !important;
}

.ms-engine-title + p { font-size: clamp(.88rem, 1.2vw, 1.05rem) !important; margin-top: .65rem !important; }

.ms-engine-tabs {
  padding: .45rem;
  border: 1px solid var(--ms-border);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.ms-engine-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .7rem 1rem !important;
  border: 1px solid transparent !important;
  border-radius: .85rem !important;
  font-size: .78rem !important;
}

.ms-engine-tab[aria-selected="true"] {
  color: #4f46e5 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.10)) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.dark .ms-engine-tab[aria-selected="true"] {
  color: #a5b4fc !important;
  background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(124,58,237,.16)) !important;
  border-color: rgba(96,165,250,.35) !important;
}

@media (max-width: 767px) {
  .ms-engine-header { min-height: 7rem; padding: 1.15rem !important; }
  .ms-engine-title { font-size: clamp(2.15rem, 9vw, 2.8rem) !important; }
  .ms-engine-mark { width: 3.5rem !important; height: 3.5rem !important; border-radius: 1rem !important; }
  .ms-engine-tab { min-height: 2.65rem; padding: .6rem .8rem !important; }
}

/* Restrained Liquid Glass finish: one blue accent, neutral chrome, softer
   depth, and larger continuous radii across every department workspace. */
:root {
  --ms-primary: #3b82f6;
  --ms-primary-hover: #2563eb;
  --ms-accent: #3b82f6;
  --ms-radius-card: 28px;
  --ms-radius-control: 15px;
  --ms-glass-blur: 32px;
  --ms-shadow-glass: 0 24px 70px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255,255,255,.34);
}

.dark {
  --ms-bg: #070b14;
  --ms-surface: rgba(16, 25, 43, .85);
  --ms-border: rgba(190, 205, 230, .16);
  --ms-shadow-glass: 0 28px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.10);
}

body {
  background:
    radial-gradient(ellipse 54rem 38rem at 14% 4%, rgba(59,130,246,.15), transparent 62%),
    radial-gradient(ellipse 48rem 34rem at 88% 24%, rgba(148,163,184,.16), transparent 68%),
    linear-gradient(155deg, #f8fafc 0%, #eef3f9 55%, #f7f9fc 100%) !important;
  background-attachment: fixed !important;
}

.dark body {
  background:
    radial-gradient(ellipse 54rem 38rem at 14% 4%, rgba(59,130,246,.22), transparent 62%),
    radial-gradient(ellipse 48rem 34rem at 88% 24%, rgba(148,163,184,.12), transparent 68%),
    linear-gradient(155deg, #101827 0%, #070b14 55%, #0b1220 100%) !important;
  background-attachment: fixed !important;
}

.dark #nav-desktop,
.dark #nav-mobile,
.dark #report-rail,
.dark .ms-engine-header,
.dark .ms-glass,
.dark .ms-card,
.dark .ms-pulse-board .bg-white:not(.ms-kpi),
.dark .ms-pulse-board .dark\:bg-slate-900:not(.ms-kpi),
.dark [data-engine-rail] details {
  background: linear-gradient(145deg, rgba(24, 36, 60, .68), rgba(10, 17, 31, .50)) !important;
  border-color: rgba(190, 205, 230, .15) !important;
  box-shadow: var(--ms-shadow-glass) !important;
  backdrop-filter: blur(24px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(128%) !important;
}

.ms-engine-header,
.ms-card,
.ms-glass,
.ms-pulse-board .bg-white:not(.ms-kpi),
.ms-pulse-board .dark\:bg-slate-900:not(.ms-kpi),
[data-engine-rail] details { border-radius: var(--ms-radius-card) !important; }

/* .ms-kpi is exempt from the board glass above. Those rules set border-color and
   box-shadow with !important, which silently killed the amber border the tile
   renderer has always put on an urgent count — the "hot" state was dead inside
   the board long before the KPI hierarchy needed an accent of its own. KPI tiles
   are content surfaces: solid background, their own border, and the lead tile's
   accent edge from ms-design-system.css. */

/* KPI tiles still carry utility classes for light-mode compatibility, but the
   dashboard shell can be dark without a `.dark` ancestor (notably during the
   first shell paint). Keep these cards readable in that state too. The previous
   light fallback made the row look disabled: pale grey surfaces, white numbers,
   and nearly invisible labels. */
.ms-pulse-board .ms-kpi {
  background: linear-gradient(145deg, rgba(28, 42, 69, .86), rgba(10, 18, 34, .78)) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.18) !important;
  color: #f8fafc !important;
}

.ms-pulse-board .ms-kpi .ms-kpi__value {
  color: #f8fafc !important;
}

.ms-pulse-board .ms-kpi .ms-kpi__label {
  color: #a9b8ce !important;
}

.ms-pulse-board .ms-kpi .ms-kpi__hint {
  color: #60a5fa !important;
}

.ms-pulse-board .ms-kpi[data-emphasis="lead"],
.ms-pulse-board .ms-kpi[data-emphasis="alert"] {
  border-color: rgba(245, 158, 11, .78);
}

.ms-pulse-board .ms-kpi[data-emphasis="lead"] .ms-kpi__value,
.ms-pulse-board .ms-kpi[data-emphasis="alert"] .ms-kpi__value {
  color: #fbbf24;
}

/* Academy is an engine page, so it can render before the global `.dark` class
   is attached. Its light utility classes were then painting inactive filters,
   metrics, and course surfaces as flat grey with pale text. Keep the Academy
   surface in the same dark Liquid Glass language as the rest of DealerOS. */
#academy-root {
  background: transparent !important;
  color: #f8fafc !important;
}

#academy-root .bg-white,
#academy-root .dark\:bg-slate-900,
#academy-root .bg-slate-50,
#academy-root .dark\:bg-slate-950\/50 {
  background: linear-gradient(145deg, rgba(28, 42, 69, .78), rgba(10, 18, 34, .68)) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.16) !important;
}

#academy-root .text-slate-900,
#academy-root .dark\:text-white {
  color: #f8fafc !important;
}

#academy-root .text-slate-700,
#academy-root .dark\:text-slate-300,
#academy-root .text-slate-600,
#academy-root .dark\:text-slate-400,
#academy-root .text-slate-500,
#academy-root .dark\:text-slate-500 {
  color: #a9b8ce !important;
}

#academy-root .border-slate-200,
#academy-root .dark\:border-slate-800,
#academy-root .dark\:border-slate-700 {
  border-color: rgba(148, 163, 184, .22) !important;
}

#academy-root button:not(.bg-indigo-600):not([class*="bg-rose-"]):not([class*="bg-amber-"]) {
  color: #dbe7f5;
}

/* A department header is a title plus an action group. On a phone the group is two
   or three buttons that cannot fit beside the title, and the row did not wrap — so
   "Open Accounting Workspace" ran off the right edge of the card. The header itself
   now wraps (markup), and the action group wraps within it. Scoped to the Pulse
   department sections: this is their layout, not a global flex override. */
.pulse-dept-section > .flex.justify-between > .flex {
  flex-wrap: wrap;
  row-gap: .5rem;
}

/* Keep empty Pulse cards compact instead of stretching them into blank tiles. */
.ms-pulse-board .text-center.text-slate-400 {
  padding-top: .8rem !important;
  padding-bottom: .8rem !important;
}

.ms-engine-header { min-height: 8rem; }

.ms-engine-mark {
  color: #7db2ff !important;
  background: linear-gradient(145deg, rgba(96,165,250,.18), rgba(255,255,255,.05)) !important;
  border-color: rgba(125,178,255,.30) !important;
  border-radius: 1.6rem !important;
}

.ms-engine-title { font-size: clamp(2.35rem, 3.6vw, 3.65rem) !important; }

.dark .ms-engine-tabs {
  border-radius: 1.45rem;
  background: rgba(15,23,42,.68);
  border-color: rgba(190,205,230,.14);
}

.ms-engine-tabs { border-radius: 1.45rem; }

.ms-engine-tab { border-radius: 1.05rem !important; }
.dark .ms-engine-tab { color: #f1f5f9 !important; }
.ms-engine-tab:hover { color: #4f46e5 !important; }
.dark .ms-engine-tab:hover { color: #a5b4fc !important; }

.dark .ms-engine-tab[aria-selected="true"] {
  color: #a5b4fc !important;
  background: linear-gradient(145deg, rgba(59,130,246,.24), rgba(255,255,255,.07)) !important;
  border-color: rgba(125,178,255,.30) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* Department navigation uses a single mature accent. Semantic status colors
   remain available inside the actual data views. */
#nav-desktop a svg,
#nav-desktop button svg,
#nav-mobile a svg,
#nav-mobile button svg,
[data-engine-rail] button svg { color: #8291a8 !important; }

#nav-desktop [aria-current="page"] svg,
#nav-desktop .active svg,
#nav-mobile [aria-current="page"] svg,
[data-engine-rail] button:hover svg { color: #6ea8ff !important; }

/* CRM dialogs are appended directly to body, so they need their own glass
   surface instead of relying on the page-content cascade. */
.ms-modal-scrim {
  background: rgba(2, 6, 16, .52) !important;
  backdrop-filter: blur(10px) saturate(90%);
  -webkit-backdrop-filter: blur(10px) saturate(90%);
}

/* A modal is the surface you READ and TYPE on, so it is opaque. It used to be a
   translucent gradient (.94 -> .82 alpha) sitting on a dark .52 scrim, which meant
   the scrim bled through progressively down the card: the header rendered ~#F7F7F8
   and the bottom ~#DCDFE5. On a tall record modal that reads as the lower half
   being disabled — the Email/Call/Text row looked greyed out when it was perfectly
   active. The gradient stops below are the ORIGINAL design intent, now at full
   alpha, so the card looks as it was drawn instead of as the scrim repaints it.
   backdrop-filter is dropped with them: it composites a layer to blur something
   that is no longer visible through the card. Depth here comes from the scrim
   behind the card and the shadow, which is what a scrim is for. */
.ms-crm-glass {
  color: var(--ms-t-primary, #0f172a);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 80px rgba(15,23,42,.18) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ms-crm-glass .ms-glass,
.ms-crm-glass .ms-c--glass {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: rgba(15,23,42,.08) !important;
}
.ms-crm-glass > .sticky {
  background: #FFFFFF !important;
  border-color: rgba(23,25,31,.10) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dark .ms-crm-glass {
  border-color: rgba(190,205,230,.18);
  /* Same stops as before, at full alpha. */
  background: #121318 !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.dark .ms-crm-glass > .sticky {
  background: #1A1D24 !important;
  border-color: rgba(190,205,230,.12) !important;
}

.ms-crm-glass input,
.ms-crm-glass select,
.ms-crm-glass textarea,
.ms-crm-glass .bg-slate-950,
.ms-crm-glass .dark\:bg-slate-950 {
  border-radius: 17px !important;
  border-color: rgba(100,116,139,.24) !important;
  background: rgba(255,255,255,.78) !important;
  color: #0f172a !important;
  caret-color: #2563EB !important;
}

.dark .ms-crm-glass input,
.dark .ms-crm-glass select,
.dark .ms-crm-glass textarea,
.dark .ms-crm-glass .bg-slate-950,
.dark .ms-crm-glass .dark\:bg-slate-950 {
  border-color: rgba(190,205,230,.18) !important;
  background: rgba(3,9,20,.72) !important;
  color: #f8fafc !important;
  caret-color: #818cf8 !important;
}

/* #94a3b8 is 2.56:1 on a white field — legible on the dark card it was picked for,
   not on the light one. Scoped per theme; slate-500 gives 4.76:1 in light. */
.ms-crm-glass input::placeholder,
.ms-crm-glass textarea::placeholder { color: #64748b !important; opacity: 1; }

.dark .ms-crm-glass input::placeholder,
.dark .ms-crm-glass textarea::placeholder { color: #94a3b8 !important; opacity: 1; }

.ms-staff-editor { padding: 1.25rem; }
.ms-staff-editor .ms-staff-actions { align-items: center; }
@media (max-width: 639px) {
  .ms-staff-editor { padding: 1rem; }
  .ms-staff-editor .ms-staff-grid { grid-template-columns: minmax(0,1fr) !important; }
  .ms-staff-editor .ms-staff-actions > * { width: 100%; justify-content: center; }
  .ms-staff-editor .ms-staff-actions .flex-1 { display: none; }
}

.ms-crm-glass .rounded-lg,
.ms-crm-glass .rounded-xl,
.ms-crm-glass .rounded-2xl { border-radius: 18px !important; }

.ms-crm-actions { gap: .55rem !important; }

/* These buttons were styled for a dark modal — #d7e0ed text on a 10%-alpha fill —
   and there was no .dark variant, so that styling also landed on the LIGHT card.
   #d7e0ed on white is about 1.3:1; WCAG asks 4.5:1. Email / Call / Text / Log
   activity were not "greyed out" in the screenshot, they were very nearly
   invisible, and they are the primary actions on a customer record.
   Shared geometry first, then a palette per theme. */
.ms-crm-actions button {
  min-height: 2.35rem;
  padding: .55rem .8rem !important;
  border-radius: 13px !important;
}

/* Light: slate-700 on a faint slate fill — about 10:1. */
.ms-crm-actions button {
  color: #334155 !important;
  background: rgba(15,23,42,.05) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60) !important;
}

.ms-crm-actions button:hover {
  color: #0f172a !important;
  background: rgba(15,23,42,.09) !important;
  border-color: rgba(15,23,42,.20) !important;
}

/* Dark: the original treatment, now only where it was designed to be. */
.dark .ms-crm-actions button {
  color: #d7e0ed !important;
  background: rgba(148,163,184,.10) !important;
  border: 1px solid rgba(190,205,230,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.dark .ms-crm-actions button:hover {
  color: #fff !important;
  background: rgba(148,163,184,.17) !important;
  border-color: rgba(190,205,230,.24) !important;
}

.ms-crm-actions .ms-action-primary {
  color: #fff !important;
  background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
  border-color: rgba(147,197,253,.46) !important;
}

/* Quiet glass notifications replace solid red/green utility blocks. */
.ms-toast {
  max-width: min(34rem, calc(100vw - 2rem));
  border: 1px solid rgba(190,205,230,.20);
  border-radius: 16px !important;
  background: rgba(13,22,38,.82) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(26px) saturate(115%);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
}

.ms-toast-error { border-left: 3px solid #fb7185; }
.ms-toast-success { border-left: 3px solid #34d399; }
.ms-toast-info,
.ms-toast-warning { border-left: 3px solid #60a5fa; }

@media (max-width: 767px) {
  .ms-engine-header { min-height: 6.75rem; border-radius: 23px !important; }
  .ms-crm-glass { border-radius: 24px !important; }
  .ms-crm-actions { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: .35rem; }
  .ms-crm-actions button { flex: 0 0 auto; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Reduced-transparency fallback. The Liquid Glass chrome stacks many
   backdrop-filter blur layers; on iOS with Reduce Transparency enabled (or
   under Safari's own compositing pressure), backdrop-filter can silently fail
   and flatten to a near-opaque, washed-out surface instead of the intended
   dark/saturated gradient — every glass panel loses contrast at once,
   including cards whose own colors were never translucent. Drop the blur and
   force a solid, high-contrast surface so nothing depends on the browser
   actually compositing the effect.
────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .ms-engine-header, .ms-glass, .ms-card, .ms-crm-glass, .ms-toast,
  [data-engine-rail] details, [data-engine-rail] details[open] > summary,
  body > header, #dept-sidebar, #nav-desktop, #nav-mobile, #report-rail {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--ms-surface-solid) !important;
  }
  .dark .ms-engine-header, .dark .ms-glass, .dark .ms-card, .dark .ms-crm-glass, .dark .ms-toast,
  .dark [data-engine-rail] details, .dark body > header, .dark #dept-sidebar, .dark #nav-desktop, .dark #nav-mobile, .dark #report-rail {
    background: var(--ms-surface-solid) !important;
  }
}

/* Assistant summaries use the same system surface as the rest of Pulse.
   Their old forced navy gradient split the light dashboard into a dark band. */
.ms-ai-panel {
  isolation: isolate;
  color: var(--ms-text) !important;
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(15, 23, 42, .10) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
}

.ms-ai-panel :is(.text-white, .text-slate-950, .text-slate-300) { color: var(--ms-text) !important; }
.ms-ai-panel :is(.text-sky-300, .text-sky-400) { color: #2563eb !important; }
.ms-ai-panel .text-amber-300 { color: #a16207 !important; }
.ms-ai-panel .text-rose-400 { color: #be123c !important; }
.ms-ai-panel .text-emerald-400 { color: #047857 !important; }
.ms-ai-panel .text-indigo-300 { color: #4338ca !important; }
.ms-ai-panel [class*="border-slate-800"] { border-color: var(--ms-border) !important; }
.ms-ai-panel button {
  color: var(--ms-text) !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid var(--ms-border) !important;
  box-shadow: none !important;
}
.ms-ai-panel button.bg-sky-500 {
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, .10) !important;
  border-color: rgba(37, 99, 235, .22) !important;
}

.dark .ms-ai-panel {
  color: var(--ms-text) !important;
  background: rgba(26, 29, 36, .84) !important;
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-glass) !important;
}
.dark .ms-ai-panel :is(.text-white, .text-slate-950, .text-slate-300) { color: var(--ms-text) !important; }
.dark .ms-ai-panel button { background: rgba(255, 255, 255, .08) !important; }

/* The department column is layout only. Painting this full-height wrapper as
   glass creates a long vertical edge that reads like a broken canvas seam. */
#nav-desktop {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* #dept-sidebar is the sidebar COLUMN, not a panel. The one glass surface in
   that column is #dashboard-nav, which paints itself at >=768px. While the
   wrapper was also in the glass lists above, `.dark #dept-sidebar` (a class
   plus an id) out-specified this bare-id reset, so dark mode painted a second
   panel a few pixels outside the nav's — two stacked boxes with a hard seam.
   Specificity, not source order, decided it; the fix is to not claim the
   wrapper is glass in the first place. */
#dept-sidebar {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the fixed glass header visually continuous with the canvas. The broad
   glass cascade gives surfaces a deep card shadow; on a full-width header that
   becomes a hard horizontal band. A border creates the same seam, so the shell
   header deliberately uses neither. */
html body > header,
html.dark body > header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* The top header, a bit more transparent than the cards/nav share by default. */
body > header {
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.46)) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
.dark body > header {
  background: linear-gradient(135deg, rgba(24,36,60,.56), rgba(10,17,31,.40)) !important;
}

/* Pulse department cards use status color sparingly; the lower page should read
   as one calm operating surface rather than a row of competing accent panels. */
#command-root .pulse-dept-section {
  filter: saturate(.72);
}
#command-root .pulse-dept-section > div:first-child {
  border-bottom-color: rgba(148,163,184,.22) !important;
}

/* Desktop dashboard scroll ownership: the page content and the sidebar each
   get one scroll region. The nested legacy nav must not paint a second glass
   panel or become a third scroll container. */
@media (min-width: 768px) {
  html:has(body.ms-app-booting), body.ms-app-booting { overflow: hidden !important; }
  #dept-sidebar {
    display: none !important;
  }
  #dashboard-nav {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: .65rem !important;
    background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.50)) !important;
    border: 1px solid rgba(255,255,255,.50) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.76) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 136px) !important;
  }
  .dark #dashboard-nav {
    background: linear-gradient(145deg, rgba(24,36,60,.68), rgba(10,17,31,.50)) !important;
    border-color: rgba(190,205,230,.16) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  #nav-desktop, #dept-nav { overflow: visible !important; }

  /* Restricted product rails keep a bit more breathing room from the
     content column than the full department nav does. */
  main:has(#dept-sidebar .ms-product-nav-item),
  main:has(#dept-sidebar .ms-suite-nav-item) {
    column-gap: 1.5rem !important;
  }
}

/* The authenticated desktop shell has three distinct navigation zones: the
   fixed top header, a compact department rail, and each engine's right
   operations rail. Explicit semantic columns avoid purge-sensitive arbitrary
   Tailwind utilities and keep the left rail from stretching over the canvas. */
@media (min-width: 1024px) {
  .ms-dashboard-shell {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: start;
    column-gap: 1.5rem !important;
  }
  #dept-sidebar {
    display: flex !important;
    align-self: start !important;
    width: 240px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 136px) !important;
    overflow: visible !important;
  }
  #dashboard-nav {
    width: 100% !important;
    height: auto !important;
  }
}

/* Sidebar nav items on every dashboard — department list, marketing-suite
   areas and single-product restricted rails alike — at every viewport
   width. Provides generous breathing room so multi-word product titles fit. */
#dept-nav .dept-nav-item,
.ms-product-nav-item,
.ms-suite-nav-item {
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: normal !important;
  text-align: left !important;
  border-radius: .85rem !important;
}

.ms-suite-nav-item span,
.dept-nav-item span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 767px) {
  #dashboard-nav { overflow: visible !important; max-height: none !important; }
}

/* MarketSync Digital & Settings — Liquid Glass material across workspaces.
   Applies glassmorphism, satin specular borders, and blur depth to settings cards,
   roster tables, and digital suite cards alike. */
html[data-ms-suite="digital"] #dept-tabbar,
/* Brand modes restyle every rounded, bordered card inside .page-content. A Pulse
   KPI tile is exactly that shape, so both modes re-glassed it and repainted its
   border — which erased the amber that marks an urgent count. Measured: in
   `marketsync` and `digital` the lead tile and a normal tile ended up with the
   SAME border colour, so urgency was invisible in two of the four dashboard
   modes while looking perfectly fine in the other two. .ms-kpi is a content
   surface and owns its own edge. */
html[data-ms-suite="digital"] .page-content :is(.rounded-xl.border, .rounded-2xl.border, .rounded-3xl.border):not(.ms-kpi),
html[data-ms-suite="digital"] .ms-digital-suite > div,
[data-page-content="settings"] :is(.rounded-lg, .rounded-xl, .rounded-2xl):is(.bg-white, .dark\:bg-slate-900),
#lead-routing-card > div,
#settings-team,
#crm-dms-card,
#settings-texting-card,
#settings-lang-card,
#prof-branding-section,
#settings-my-record > div {
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.52)) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
}

.dark[data-ms-suite="digital"] #dept-tabbar,
.dark[data-ms-suite="digital"] .page-content :is(.rounded-xl.border, .rounded-2xl.border, .rounded-3xl.border):not(.ms-kpi),
.dark[data-ms-suite="digital"] .ms-digital-suite > div,
.dark [data-page-content="settings"] :is(.rounded-lg, .rounded-xl, .rounded-2xl):is(.bg-white, .dark\:bg-slate-900),
.dark #lead-routing-card > div,
.dark #settings-team,
.dark #crm-dms-card,
.dark #settings-texting-card,
.dark #settings-lang-card,
.dark #prof-branding-section,
.dark #settings-my-record > div {
  background: linear-gradient(145deg, rgba(26,38,64,.72), rgba(9,16,30,.52)) !important;
  border: 1px solid rgba(190,205,230,.18) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Settings Staff & Data Tables — Liquid Glass Table Elevation */
[data-page-content="settings"] table,
#settings-team table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

[data-page-content="settings"] table th,
#settings-team table th {
  padding: .75rem 1rem !important;
  font-size: .6875rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ms-text-muted) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

.dark [data-page-content="settings"] table th,
.dark #settings-team table th {
  border-bottom-color: rgba(255,255,255,.08) !important;
}

[data-page-content="settings"] table td,
#settings-team table td {
  padding: .85rem 1rem !important;
  font-size: .8125rem !important;
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
  vertical-align: middle !important;
}

.dark [data-page-content="settings"] table td,
.dark #settings-team table td {
  border-bottom-color: rgba(255,255,255,.05) !important;
}

[data-page-content="settings"] table tr:last-child td,
#settings-team table tr:last-child td {
  border-bottom: 0 !important;
}

/* Tab strips (engine tab bars, department/suite tab bars — every role="tablist" in
   the dashboard) keep real horizontal scroll on a narrow viewport, but never show the
   browser's own scrollbar chrome for it. A short row of tabs that already fits was
   still getting a persistent scrollbar/arrow pair from some browsers' default
   scrollbar rendering, reading as "there's more" when there isn't. */
[role="tablist"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[role="tablist"]::-webkit-scrollbar {
  display: none;
}
.no-scrollbar, .scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar, .scrollbar-none::-webkit-scrollbar { display: none; }
html:not(.dark) {
  --ms-bg: #e8ecf2;
  --ms-surface: rgba(247, 249, 252, 0.78);
  --ms-surface-solid: #f3f5f8;
}
html:not(.dark) .ms-c--glass,
html:not(.dark) .ms-glass,
html:not(.dark) .ms-c {
  background: rgba(247, 249, 252, 0.82);
  border-color: rgba(15, 23, 42, 0.08);
}
html:not(.dark) #seo-workspace-root .rounded-2xl,
html:not(.dark) #seo-workspace-root table {
  background: #f6f7fa;
}
/* MarketSync Internal — one restrained liquid-glass company operating system. */
html[data-dash-mode="marketsync"] body {
  background: var(--ms-bg) !important;
}
html:not(.website-builder-mode) #website-root,
html:not(.website-builder-mode) [data-page-content="website"],
html:not(.website-builder-mode) [data-ws-theme] #website-root,
html:not(.website-builder-mode) [data-ws-theme] div[data-page-content="website"] {
  background: transparent !important;
}
html[data-dash-mode="marketsync"] :is(#dept-tabbar, .page-content .eng-shell-header, .page-content .rounded-xl.border:not(.ms-kpi), .page-content .rounded-2xl.border:not(.ms-kpi)) {
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(245,248,255,.52)) !important;
  border-color: rgba(255,255,255,.62) !important;
  border-radius: 1.4rem !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}
.dark[data-dash-mode="marketsync"] :is(#dept-tabbar, .page-content .eng-shell-header, .page-content .rounded-xl.border:not(.ms-kpi), .page-content .rounded-2xl.border:not(.ms-kpi)) {
  background: linear-gradient(145deg, rgba(25,36,60,.72), rgba(8,15,29,.56)) !important;
  border-color: rgba(203,213,225,.16) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html[data-dash-mode="marketsync"] #dept-nav .dept-nav-item {
  border-radius: 1rem !important;
  padding: .65rem .8rem !important;
  color: var(--ms-text-muted) !important;
}
html[data-dash-mode="marketsync"] #dept-nav .dept-nav-item[aria-current="page"] {
  color: var(--ms-text) !important;
  background: rgba(255,255,255,.66) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.10), inset 0 0 0 1px rgba(255,255,255,.65) !important;
}

/* MarketSync HQ navigation uses the same quiet liquid-glass treatment on phones
   as the desktop rail. Solid blue menu tiles made the internal OS look like a
   separate, generic customer app. */
html[data-dash-mode="marketsync"] #nav-more-menu .ms-more-sheet {
  background: rgba(248, 250, 255, .78) !important;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 0 0 1.75rem 1.75rem !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  backdrop-filter: blur(30px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(155%) !important;
}
html[data-dash-mode="marketsync"] #nav-more-list > button:not(.text-rose-600) {
  min-height: 3.4rem;
  padding: .8rem 1rem !important;
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 1rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
html.dark[data-dash-mode="marketsync"] #nav-more-menu .ms-more-sheet {
  background: rgba(11, 20, 36, .84) !important;
  border-color: rgba(255, 255, 255, .12);
}
html.dark[data-dash-mode="marketsync"] #nav-more-list > button:not(.text-rose-600) {
  background: rgba(30, 41, 59, .62) !important;
  border-color: rgba(255, 255, 255, .09);
}

.ms-hq-launch {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  min-height: 5.25rem;
  padding: .9rem;
  color: var(--ms-text);
  text-align: left;
  background: rgba(255, 255, 255, .52);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ms-hq-launch:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .76);
  border-color: rgba(37, 99, 235, .24);
}
.ms-hq-launch__icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  color: #2563eb;
  background: rgba(219, 234, 254, .72);
  border: 1px solid rgba(147, 197, 253, .44);
  border-radius: .95rem;
}
.ms-hq-launch b,
.ms-hq-launch small { display: block; }
.ms-hq-launch b { font-size: 1rem; font-weight: 850; }
.ms-hq-launch small { margin-top: .18rem; color: var(--ms-text-muted); font-size: .82rem; line-height: 1.35; }
.ms-hq-launch__chevron { margin-left: auto; flex: 0 0 auto; color: var(--ms-text-muted); }
.dark .ms-hq-launch { background: rgba(30, 41, 59, .54); border-color: rgba(255, 255, 255, .09); }
.dark .ms-hq-launch:hover { background: rgba(51, 65, 85, .62); border-color: rgba(96, 165, 250, .32); }
.dark .ms-hq-launch__icon { background: rgba(37, 99, 235, .18); border-color: rgba(96, 165, 250, .22); }

@media (max-width: 520px) {
  .ms-hq-launch {
    align-items: flex-start;
    min-height: 7.25rem;
    padding: .8rem;
  }
  .ms-hq-launch__chevron { display: none; }
  .ms-hq-launch small { font-size: .78rem; }
}
.dark[data-dash-mode="marketsync"] #dept-nav .dept-nav-item[aria-current="page"] {
  background: rgba(71,85,105,.34) !important;
}
html[data-dash-mode="marketsync"] .page-content h1 {
  letter-spacing: -.045em;
}
html[data-dash-mode="marketsync"] #automation-modal > div:last-child {
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 1.5rem !important;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.dark[data-dash-mode="marketsync"] #automation-modal > div:last-child {
  background: rgba(15,23,42,.86) !important;
  border-color: rgba(255,255,255,.12);
}

/* Dashboard canvas: one continuous system background. The shell, scroll
   column and unpainted Pulse board must never form separate vertical bands. */
html:not(.dark) body:has(#dept-sidebar) {
  background: var(--ms-bg) !important;
  background-image: none !important;
}

html:not(.dark) body:has(#dept-sidebar) > main,
html:not(.dark) body:has(#dept-sidebar) > main > section {
  background: transparent !important;
  background-image: none !important;
}

/* The MarketSync-internal cascade above targets every rounded content block.
   Keep the assistant's semantic system surface authoritative there too. */
html[data-dash-mode="marketsync"] .page-content .ms-ai-panel {
  color: var(--ms-text) !important;
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(15, 23, 42, .10) !important;
}

html.dark[data-dash-mode="marketsync"] .page-content .ms-ai-panel {
  background: rgba(26, 29, 36, .84) !important;
  border-color: var(--ms-border) !important;
}

/* Management greeting: one calm, system-aware surface with a deterministic
   daily focus line. It follows the OS theme instead of forcing a dark band. */
.ms-daily-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.35rem;
  color: var(--ms-text);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 1.5rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.ms-daily-greeting__eyebrow {
  margin-bottom: .2rem;
  color: #2563eb;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ms-daily-greeting h2 {
  color: inherit;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -.035em;
}
.ms-daily-greeting blockquote {
  max-width: 42rem;
  margin: 0;
  color: var(--ms-text-muted);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.5;
  text-align: right;
}
.dark .ms-daily-greeting {
  background: rgba(26, 29, 36, .78);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Fixed manager report rail. Its collapsed state stays icon-only; expanding it
   reveals labels without replacing the workspace or stealing page width. */
#report-rail {
  display: none !important;
  width: 3.5rem;
  max-height: calc(100vh - 9rem);
  padding: .5rem;
  overflow: hidden;
  color: var(--ms-text-muted);
  background: rgba(255, 255, 255, .76) !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  border-right: 0 !important;
  border-radius: 1.35rem 0 0 1.35rem;
  box-shadow: -10px 18px 36px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  transition: width .2s ease;
}
#report-rail.rr-open { width: 12.5rem; }
.ms-report-rail__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  min-height: 2.3rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ms-border);
}
.ms-report-rail__head .rr-head-label {
  margin-right: auto;
  padding-left: .45rem;
  color: var(--ms-text);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ms-report-rail__head button,
#report-rail button[data-report] {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 2.35rem;
  padding: .48rem .58rem;
  color: inherit;
  background: transparent !important;
  border: 0;
  border-radius: .8rem;
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
}
.ms-report-rail__head button { width: 2.35rem; justify-content: center; padding: .45rem; }
.ms-report-rail__head button:hover,
#report-rail button[data-report]:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, .10) !important;
}
#report-rail svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  stroke-width: 1.8;
  transition: transform .2s ease;
}
.ms-report-rail__items {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  max-height: calc(100vh - 12.25rem);
  padding-top: .35rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.ms-report-rail__items::-webkit-scrollbar { display: none; }
.dark #report-rail {
  color: var(--ms-text-muted);
  background: rgba(22, 25, 32, .78) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: -12px 18px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (max-width: 767px) {
  .ms-daily-greeting {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1.1rem;
  }
  .ms-daily-greeting blockquote { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  #report-rail, #report-rail svg { transition: none; }
}


/* Team Messages panel sits to the RIGHT of the left-dock bubble so the
   launcher never disappears under the conversation. */
.team-chat-dock-panel {
  position: fixed;
  z-index: 10000;
  left: auto;
  right: 12px;
  bottom: 88px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(560px, calc(100dvh - 160px));
  height: min(520px, calc(100dvh - 160px));
}
@media (min-width: 768px) {
  .team-chat-dock-panel {
    right: 24px;
    width: 380px;
  }
}

.ms-crm-glass .ms-crm-actions button,
.ms-crm-glass #crm-actions-menu button { color: #0f172a; }
.dark .ms-crm-glass #crm-actions-menu button { color: #f1f5f9; }

/* Facebook-only product keeps a larger Marketplace hero. Complete stays compact. */
html[data-dash-tier="fb"] #feeds-panel { padding: 1.75rem !important; }
html[data-dash-tier="fb"] #feeds-panel h2 { font-size: 1.875rem !important; line-height: 1.1 !important; }
html[data-dash-tier="fb"] #feeds-panel .fb-hero-copy { display: block !important; }

/* Inventory Intelligence: liquid glass, branded, less neon violet. */
.ms-inventory-intelligence .bg-white {
  background: var(--ms-s-glass, rgba(255,255,255,.78)) !important;
  border-color: var(--ms-g-border, rgba(15,23,42,.10)) !important;
  box-shadow: var(--ms-g-shadow, 0 10px 30px rgba(15,23,42,.06)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.dark .ms-inventory-intelligence .bg-white {
  background: var(--ms-s-glass, rgba(15,23,42,.55)) !important;
}
.ms-inventory-intelligence .bg-violet-50,
.ms-inventory-intelligence .bg-violet-600,
[data-page-content="inv-intel"] .bg-violet-600 {
  background: #4f46e5 !important;
}
.ms-inventory-intelligence .text-violet-500,
.ms-inventory-intelligence .text-violet-600,
.ms-inventory-intelligence .text-violet-800 {
  color: #4338ca !important;
}
.ms-inventory-intelligence .ai-stat-card,
[data-page-content="market"] .rounded-xl {
  border-radius: 22px !important;
}


/* Global readability: body copy 16px minimum, headings 18–20px. */
html { font-size: 16px; }
body { font-size: 16px; line-height: 1.5; }
p, li, td, th, label, input, select, textarea, button {
  font-size: inherit;
}
.page-content p,
.ms-text-body,
.ms-c__body {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.text-sm { font-size: 16px !important; line-height: 1.5 !important; }
.text-xs,
.text-\[10px\],
.text-\[11px\],
.text-\[12px\],
.text-\[13px\] {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
h1, .ms-title-page, .text-2xl, .text-3xl {
  font-size: 20px !important;
  line-height: 1.25 !important;
}
h2, h3, .ms-title-section, .text-xl, .text-lg {
  font-size: 18px !important;
  line-height: 1.3 !important;
}
.ms-engine-title {
  font-size: clamp(2.35rem, 4.2vw, 3.5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  font-weight: 900 !important;
}
.ms-engine-title + p {
  font-size: 1rem !important;
  line-height: 1.45 !important;
  margin-top: .5rem !important;
}


/* Staff dossier modal — light tiles in light mode, dark tiles only in dark mode */
.ms-crm-glass .ms-ai-panel {
  background: transparent !important;
  box-shadow: none !important;
}
.ms-c--glass.light\:bg-white, .ms-staff-kpi {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
.dark .ms-staff-kpi {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}

/* Design Studio phone workspace. The editor is intentionally a drawer-based
 * single-column layout below tablet width; desktop rails must never squeeze the
 * artboard into an unusable sliver. */
#ms-studio-master-modal {
  --studio-blue: #2563eb;
  --studio-ink: #0b1220;
  --studio-panel: rgba(15, 23, 42, .94);
  background: #f7f8fa !important;
  color: #0f172a;
}
#ms-studio-master-modal > .flex-shrink-0:first-child > header {
  background: linear-gradient(100deg, #0ea5c9 0%, #2563eb 48%, #7c3aed 100%) !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.2) !important;
  min-height: 58px;
}
#ms-studio-master-modal > .flex-shrink-0:first-child > header input { color: #fff !important; }
#ms-studio-master-modal > .flex-shrink-0:first-child > header input::placeholder { color: rgba(255,255,255,.72) !important; }
#ms-studio-master-modal > .flex-shrink-0:first-child > div:nth-child(2) {
  background: rgba(255,255,255,.88) !important;
  border-bottom-color: #dbe3ef !important;
}
#ms-studio-master-modal [data-studio-region="rail"],
#ms-studio-master-modal [data-studio-region="drawer"],
#ms-studio-master-modal [data-studio-region="inspector"] {
  background: rgba(255,255,255,.96) !important;
  border-color: #dbe3ef !important;
}
#ms-studio-master-modal [data-studio-region="rail"] { width: 88px !important; padding-top: 12px; gap: 8px; }
#ms-studio-master-modal .studio-tool-rail-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 82px; min-height: 58px; padding: 6px 3px; border: 0 !important;
  border-radius: 0; background: transparent !important; color: #475569 !important;
  font-size: 11px; line-height: 1.1; font-weight: 800; white-space: nowrap;
  transition: color .16s ease;
}
#ms-studio-master-modal .studio-tool-rail-button:hover { background: transparent !important; color: #1e293b !important; }
#ms-studio-master-modal .studio-tool-rail-button .studio-tool-icon { color: #64748b !important; transition: color .16s ease; }
#ms-studio-master-modal .studio-tool-rail-button[aria-current="page"] { background: transparent !important; color: #1e293b !important; }
#ms-studio-master-modal .studio-tool-rail-button[aria-current="page"] .studio-tool-icon { color: #2563eb !important; }
#ms-studio-master-modal .studio-tool-rail-button:focus-visible { outline: 2px solid rgba(37,99,235,.45); outline-offset: -2px; }
#ms-studio-master-modal [data-studio-region="drawer"] { width: 320px !important; }
#ms-studio-master-modal [data-studio-region="inspector"] { width: 300px !important; }
#ms-studio-master-modal [data-studio-region="canvas"] {
  background: #f7f8fa !important;
  background-image: radial-gradient(#d7dee8 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  overflow: auto !important;
  padding: 38px 48px 70px;
}
#ms-studio-master-modal #studio-artboard-container {
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: 0 18px 55px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.12) !important;
}
#ms-studio-master-modal [data-studio-region="footer"] {
  background: rgba(255,255,255,.97) !important;
  border-top-color: #dbe3ef !important;
  color: #334155 !important;
}
#ms-studio-master-modal [data-studio-region="footer"] button,
#ms-studio-master-modal [data-studio-region="footer"] select { color: #334155 !important; }
/* Studio drawer cards must remain readable in the light Canva-style workspace.
 * The utility classes also carry dark-mode text utilities, which previously
 * produced near-white cards with white labels and invisible SVG previews. */
#ms-studio-master-modal #studio-tool-panel { color: #1e293b !important; }
#ms-studio-master-modal #studio-tool-panel input,
#ms-studio-master-modal #studio-tool-panel select,
#ms-studio-master-modal #studio-tool-panel textarea { background: #fff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
#ms-studio-master-modal #studio-tool-panel input::placeholder,
#ms-studio-master-modal #studio-tool-panel textarea::placeholder { color: #64748b !important; }
#ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-100"],
#ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-50"] { background: #e8eef6 !important; color: #172033 !important; border-color: #cbd5e1 !important; }
#ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-800"] { background: #e8eef6 !important; color: #172033 !important; border-color: #cbd5e1 !important; }
#ms-studio-master-modal #studio-tool-panel button[class*="bg-indigo-500/20"] { background: #e8efff !important; color: #1d4ed8 !important; }
#ms-studio-master-modal #studio-tool-panel button[class*="bg-blue-600"],
#ms-studio-master-modal #studio-tool-panel button[class*="bg-sky-600"],
#ms-studio-master-modal #studio-tool-panel button[class*="bg-indigo-600"] { color: #fff !important; }
#ms-studio-master-modal #studio-tool-panel button svg { color: currentColor !important; opacity: 1 !important; }
#ms-studio-master-modal #studio-tool-panel .text-slate-900 { color: #172033 !important; }
#ms-studio-master-modal #studio-tool-panel .text-slate-500,
#ms-studio-master-modal #studio-tool-panel .text-slate-400 { color: #64748b !important; }
#ms-studio-master-modal #studio-tool-panel .text-slate-300 { color: #334155 !important; }
#ms-studio-master-modal #studio-tool-panel .text-white { color: #fff !important; }
#ms-studio-master-modal .studio-upload-dropzone {
  padding: 22px 14px 14px;
  text-align: center;
  border: 1px dashed #94a3b8;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fbff, #eef4fb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
#ms-studio-master-modal .studio-upload-dropzone:hover { border-color: #2563eb; background: #eef5ff; }
#ms-studio-master-modal .studio-upload-dropzone-icon,
#ms-studio-master-modal .studio-panel-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: #2563eb; color: #fff; font: 900 20px/1 ui-sans-serif, sans-serif;
  box-shadow: 0 8px 18px rgba(37,99,235,.22);
}
#ms-studio-master-modal .studio-panel-icon { width: 24px; height: 24px; border-radius: 8px; font-size: 15px; }
#ms-studio-master-modal .studio-upload-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; border: 1px solid #cbd5e1; border-radius: 11px;
  background: #fff; color: #1e3a8a; font: 800 11px/1 ui-sans-serif, sans-serif; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
#ms-studio-master-modal .studio-upload-action:hover { border-color: #2563eb; background: #eff6ff; transform: translateY(-1px); }
#ms-studio-master-modal .studio-upload-action-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
#ms-studio-master-modal .studio-upload-action-primary:hover { background: #1d4ed8; color: #fff; }
#ms-studio-master-modal .studio-shape-card { min-width: 0; }
#ms-studio-master-modal .studio-shape-art { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #2563eb; }
#ms-studio-master-modal .studio-shape-art svg { width: 40px; height: 40px; display: block; }
#ms-studio-master-modal .studio-shape-card:hover .studio-shape-art { color: #1d4ed8; transform: scale(1.08); }
#ms-studio-master-modal .studio-shape-card:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
#ms-studio-master-modal .studio-icon-card { min-width: 0; }
#ms-studio-master-modal .studio-icon-art { width: 44px; height: 44px; display: block; }
#ms-studio-master-modal .studio-icon-card:hover .studio-icon-art { transform: scale(1.08); }
#ms-studio-master-modal .studio-icon-card:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
#ms-studio-master-modal .studio-template-preview { position: relative; width: 100%; overflow: hidden; background-position: center; }
#ms-studio-master-modal .studio-template-preview img { display: block; max-width: none; }
#ms-studio-master-modal .studio-template-preview > div { pointer-events: none; }
#ms-studio-master-modal .studio-page-stack {
  position: absolute; left: 18px; top: 54px; bottom: 28px; width: 124px; z-index: 24;
  overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 12px;
}
#ms-studio-master-modal .studio-page-stack-item { position: relative; padding: 3px; border-radius: 10px; }
#ms-studio-master-modal .studio-page-stack-item.is-active { background: rgba(37,99,235,.16); box-shadow: 0 0 0 2px rgba(37,99,235,.7); }
#ms-studio-master-modal .studio-page-card { display: block; width: 100%; text-align: left; color: #334155; }
#ms-studio-master-modal .studio-page-card-canvas { display: flex; aspect-ratio: 1 / 1; align-items: flex-end; justify-content: flex-end; padding: 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(15,23,42,.18); border: 1px solid rgba(148,163,184,.28); }
#ms-studio-master-modal .studio-page-card-canvas span { font: 700 8px/1.1 ui-sans-serif, sans-serif; color: rgba(255,255,255,.8); background: rgba(15,23,42,.65); padding: 3px 4px; border-radius: 4px; }
#ms-studio-master-modal .studio-page-card-label { display: block; padding: 5px 2px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1.2 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-page-card-actions { display: flex; justify-content: flex-end; gap: 3px; position: absolute; top: 5px; right: 5px; opacity: 0; transition: opacity .15s ease; }
#ms-studio-master-modal .studio-page-stack-item:hover .studio-page-card-actions,
#ms-studio-master-modal .studio-page-stack-item.is-active .studio-page-card-actions { opacity: 1; }
#ms-studio-master-modal .studio-page-card-actions button,
#ms-studio-master-modal .studio-page-stage-actions button { width: 20px; height: 20px; border-radius: 6px; background: rgba(15,23,42,.78); color: #fff; font: 700 12px/20px ui-sans-serif, sans-serif; text-align: center; }
#ms-studio-master-modal .studio-page-stage-label { position: absolute; left: 162px; top: 16px; z-index: 25; display: flex; align-items: center; gap: 8px; color: #334155; font: 800 12px/1 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-page-stage-actions { display: flex; gap: 4px; }
.studio-mobile-panel-button { display: none; }
.ms-studio-grid-on::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:19; background-image:linear-gradient(rgba(96,165,250,.16) 1px, transparent 1px),linear-gradient(90deg, rgba(96,165,250,.16) 1px, transparent 1px); background-size:40px 40px; }
#ms-studio-master-modal [class*="bg-blue-500"],
#ms-studio-master-modal [class*="bg-blue-600"],
#ms-studio-master-modal [class*="bg-indigo-500"],
#ms-studio-master-modal [class*="bg-indigo-600"],
#ms-studio-master-modal [class*="bg-sky-600"] { color: #fff !important; }
#ms-studio-master-modal button[class*="bg-blue-"],
#ms-studio-master-modal button[class*="bg-indigo-"],
#ms-studio-master-modal button[class*="bg-sky-"] { text-shadow: 0 1px 1px rgba(0,0,0,.18); }
#ms-studio-master-modal .studio-gif-panel { border-top: 1px solid #dbe3ef; padding-top: 14px; display: grid; gap: 10px; }
#ms-studio-master-modal .studio-gif-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#ms-studio-master-modal .studio-gif-heading h4 { margin: 0; color: #0369a1; font: 900 11px/1.2 ui-sans-serif, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
#ms-studio-master-modal .studio-gif-heading span { color: #64748b; font: 700 9px/1 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-gif-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#ms-studio-master-modal .studio-gif-card, #ms-studio-master-modal .studio-gif-result { min-width: 0; overflow: hidden; border: 1px solid #dbe3ef; border-radius: 12px; background: #fff; color: #334155; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
#ms-studio-master-modal .studio-gif-card:hover, #ms-studio-master-modal .studio-gif-result:hover { border-color: #60a5fa; box-shadow: 0 5px 14px rgba(37,99,235,.14); transform: translateY(-1px); }
#ms-studio-master-modal .studio-gif-card img, #ms-studio-master-modal .studio-gif-result-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e8eef6; }
#ms-studio-master-modal .studio-gif-card span, #ms-studio-master-modal .studio-gif-result-title { display: block; overflow: hidden; padding: 6px 7px; color: #334155; font: 800 9px/1.1 ui-sans-serif, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#ms-studio-master-modal .studio-gif-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
#ms-studio-master-modal .studio-gif-search-row input, #ms-studio-master-modal .studio-gif-search-row select, #ms-studio-master-modal .studio-gif-paste input { min-width: 0; height: 36px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; padding: 0 10px; font: 700 11px/1 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-gif-search-row input::placeholder, #ms-studio-master-modal .studio-gif-paste input::placeholder { color: #94a3b8; }
#ms-studio-master-modal .studio-gif-search-row button, #ms-studio-master-modal .studio-gif-paste button { min-height: 36px; border: 0; border-radius: 10px; background: #2563eb; color: #fff; padding: 0 13px; font: 900 11px/1 ui-sans-serif, sans-serif; cursor: pointer; }
#ms-studio-master-modal .studio-gif-search-row button:hover, #ms-studio-master-modal .studio-gif-paste button:hover { background: #1d4ed8; }
#ms-studio-master-modal .studio-gif-quick-label { color: #64748b; font: 900 9px/1 ui-sans-serif, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
#ms-studio-master-modal .studio-gif-filters { display: flex; flex-wrap: wrap; gap: 6px; max-height: 116px; overflow-y: auto; padding: 2px; }
#ms-studio-master-modal .studio-gif-filter { border: 1px solid #cbd5e1; border-radius: 999px; background: #f8fafc; color: #334155; padding: 6px 9px; font: 800 9px/1 ui-sans-serif, sans-serif; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
#ms-studio-master-modal .studio-gif-filter:hover { border-color: #60a5fa; background: #eff6ff; color: #1d4ed8; }
#ms-studio-master-modal .studio-gif-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; }
#ms-studio-master-modal .studio-gif-paste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
#ms-studio-master-modal .studio-gif-status { grid-column: 1 / -1; padding: 10px; border: 1px solid #cbd5e1; border-radius: 10px; color: #64748b; background: #f8fafc; font: 700 10px/1.4 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-gif-status-error { border-color: #fbbf24; color: #92400e; background: #fffbeb; }
#ms-studio-master-modal .studio-gif-status-error span { color: #a16207; }
@media (max-width: 768px) {
  #ms-studio-master-modal { overflow: hidden !important; }
  #ms-studio-master-modal > .flex-shrink-0:first-child { min-height: 0; }
  #ms-studio-master-modal header { height: auto !important; min-height: 58px; padding: 8px 12px !important; }
  #ms-studio-master-modal header > div { min-width: 0; gap: 7px !important; }
  #ms-studio-master-modal header img { width: 44px; height: auto; object-fit: contain; }
  #ms-studio-master-modal header input { min-width: 0; max-width: 120px; font-size: 13px !important; }
  #ms-studio-master-modal header button { white-space: normal; line-height: 1.15; }
  #ms-studio-master-modal .studio-mobile-panel-button { display: inline-flex; align-items: center; justify-content: center; }
  #ms-studio-master-modal > .flex-shrink-0:first-child > div:nth-child(2) { height: auto !important; min-height: 54px; padding: 7px 10px !important; overflow-x: auto; }
  #ms-studio-master-modal > .flex-shrink-0:first-child > div:nth-child(2) > div:first-child { display: none; }
  #ms-studio-master-modal > .flex-shrink-0:first-child > div:nth-child(2) > div:last-child { width: 100%; overflow-x: auto; justify-content: flex-start; }
  #ms-studio-master-modal > .flex-1 { display: flex !important; flex-direction: column; position: relative; overflow: hidden !important; min-height: 0; }
  #ms-studio-master-modal > .flex-1 > [data-studio-region="rail"] { display: flex !important; flex-direction: row; align-items: center; gap: 6px; width: 100% !important; height: 72px; min-height: 72px; padding: 6px 10px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #dbe3ef; order: 2; z-index: 30; background: rgba(255,255,255,.97) !important; backdrop-filter: blur(18px) saturate(1.35); }
  #ms-studio-master-modal > .flex-1 > [data-studio-region="rail"] button { flex: 0 0 70px; width: 70px; height: 58px; min-height: 58px; white-space: nowrap; }
  #ms-studio-master-modal #studio-canvas-viewport { position: relative; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; overflow: auto; padding: 22px 16px 32px; order: 1; }
  #ms-studio-master-modal .studio-page-stack { left: 10px; top: 12px; bottom: 12px; width: 86px; }
  #ms-studio-master-modal .studio-page-stage-label { left: 108px; top: 10px; }
  #ms-studio-master-modal #studio-artboard-container { position: absolute; left: 50%; top: 50%; max-width: none; }
  #ms-studio-master-modal #studio-tool-panel,
  #ms-studio-master-modal #studio-inspector-panel { position: absolute; top: 0; bottom: 0; width: min(88vw, 340px) !important; max-width: 340px; height: auto; z-index: 50; box-shadow: 0 18px 45px rgba(15,23,42,.28); transition: transform .2s ease; }
  #ms-studio-master-modal #studio-tool-panel { left: 0; transform: translateX(-105%); }
  #ms-studio-master-modal #studio-inspector-panel { right: 0; transform: translateX(105%); }
  #ms-studio-master-modal #studio-tool-panel.ms-studio-mobile-open,
  #ms-studio-master-modal #studio-inspector-panel.ms-studio-mobile-open { transform: translateX(0); }
  #ms-studio-master-modal > footer { min-height: 72px; height: auto !important; padding: 8px 10px !important; flex-wrap: nowrap; overflow-x: auto; }
  #ms-studio-master-modal > footer .ml-auto { margin-left: 0 !important; }
  #ms-studio-master-modal .w-60 { width: min(86vw, 330px) !important; }
}