/* ManoIQ theme layer (design pass 1, 2026-09-26).
 * Loaded after the cloned inline styles so it wins without editing them.
 * Every color still comes from the company's branding variables
 * (--so-primary-*, --so-accent-*, --so-secondary) so each company keeps its identity.
 * Principles: neutral surfaces, one accent, quiet figures, 8px spacing rhythm,
 * clear focus states for keyboard users only. */

:root {
  --so-bg: #f6f7f9;
  --so-surface: #ffffff;
  --so-border: #e5e7eb;
  --so-border-strong: #d8dce2;
  --so-text: #111827;
  --so-text-2: #4b5563;
  --so-text-3: #6b7280;
  --so-radius: 12px;
  --so-radius-sm: 8px;
  --so-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --so-shadow-lg: 0 8px 24px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .05);
}

body { background: var(--so-bg); color: var(--so-text); font-feature-settings: "cv11", "ss01"; }

/* ---------- Sidebar ---------- */
#sidebar { background: rgb(var(--so-primary-950)) !important; box-shadow: none !important; border-right: 1px solid rgba(255, 255, 255, .06); }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.so-brand-logo { width: 40px; height: 40px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.so-brand-logo .sidebar-brand-logo { height: 40px; width: 40px; max-width: none; object-fit: contain; }
.so-brand-company { color: #fff; font-size: .86rem; font-weight: 650; line-height: 1.2; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.so-brand-product { color: rgba(255, 255, 255, .45); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-top: .15rem; }
#sidebar.collapsed .so-brand-logo { width: 34px; height: 34px; }
#sidebar .nav-group-label { color: rgba(255, 255, 255, .38); font-size: .64rem; letter-spacing: .09em; padding: 1.1rem .75rem .35rem; }
.navlink { color: rgba(255, 255, 255, .68); font-weight: 550; font-size: .855rem; padding: .55rem .75rem; border-radius: 8px; border-left: 0 !important; position: relative; }
.navlink:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.navlink.active { background: rgb(var(--so-accent-500) / .14) !important; color: #fff; }
.navlink.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--so-accent-500)); }
.navlink.active .ic { color: rgb(var(--so-accent-400)); }
.navlink:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
.so-build { color: rgba(255, 255, 255, .3) !important; }

/* ---------- Top bar ---------- */
header, #topbar, .app-header { background: rgba(255, 255, 255, .85) !important; backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--so-border) !important; }
.breadcrumb { color: var(--so-text-3); font-size: .82rem; }
.breadcrumb .bc-current { color: var(--so-text); font-weight: 600; }
.header-search { border-radius: 8px !important; background: #f3f4f6 !important; border: 1px solid transparent !important; }
.header-search:hover { border-color: var(--so-border-strong) !important; }

/* ---------- Page headers ---------- */
.tab-panel h2.text-xl { font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; color: var(--so-text) !important; }
.tab-panel h2.text-xl + p { color: var(--so-text-3); font-size: .875rem; margin-top: .15rem; }

/* ---------- Surfaces ---------- */
.panel, .stat-card { border-radius: var(--so-radius) !important; border: 1px solid var(--so-border) !important; box-shadow: var(--so-shadow) !important; }
.panel-hoverable:hover, .stat-card:hover { box-shadow: var(--so-shadow-lg) !important; transform: none !important; }

/* KPI cards: neutral figures, one accent for icons (status color only where it means something) */
.stat-card .stat-label, .stat-card p:first-child { color: var(--so-text-3); font-size: .7rem; letter-spacing: .06em; }
.stat-card .stat-value { color: var(--so-text) !important; font-weight: 700; letter-spacing: -.02em; font-size: 1.6rem; }
.stat-card .stat-icon { background: rgb(var(--so-accent-500) / .12) !important; color: rgb(var(--so-accent-600)) !important; border-radius: 10px; }
.stat-red .stat-value { color: #b42318 !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--so-radius-sm) !important; font-weight: 600 !important; font-size: .84rem !important; padding: .5rem .95rem; letter-spacing: 0; box-shadow: none !important; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn-accent { background: rgb(var(--so-accent-500)) !important; color: rgb(var(--so-on-accent)) !important; }
.btn-accent:hover { filter: none !important; background: rgb(var(--so-accent-600)) !important; }
.btn-primary { background: rgb(var(--so-primary-900)) !important; }
.btn-ghost { background: #fff !important; color: var(--so-text) !important; border: 1px solid var(--so-border-strong) !important; }
.btn-ghost:hover { background: #f9fafb !important; border-color: #c5cad3 !important; }
.btn:focus-visible { outline: 2px solid rgb(var(--so-accent-500)); outline-offset: 2px; }

/* ---------- Forms ---------- */
.field-label { color: var(--so-text-2); font-size: .72rem; letter-spacing: .03em; font-weight: 600; }
.field-input { border-radius: var(--so-radius-sm) !important; border-color: var(--so-border-strong) !important; min-height: 38px; font-size: .875rem; }
input.field-input:focus, select.field-input:focus, textarea.field-input:focus { outline: none !important; border-color: rgb(var(--so-accent-500)) !important; box-shadow: 0 0 0 3px rgb(var(--so-accent-500) / .18) !important; }

/* ---------- Tables ---------- */
table { font-size: .855rem; }
thead th { background: #f9fafb; color: var(--so-text-3) !important; font-size: .7rem !important; letter-spacing: .06em; font-weight: 600 !important; border-bottom: 1px solid var(--so-border); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f9fafb; }
tbody td { border-color: #f0f1f3 !important; }

/* ---------- Badges ---------- */
.badge { border-radius: 6px; font-weight: 600; letter-spacing: .02em; font-size: .68rem; padding: .2rem .5rem; }

/* ---------- Shared ManoIQ components (new modules) ---------- */
.so-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.so-page-head h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; }
.so-page-head p { color: var(--so-text-3); font-size: .875rem; margin-top: .15rem; }
.so-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem; border-bottom: 1px solid var(--so-border); }
.so-toolbar .field-input { width: auto; min-width: 150px; }
.so-chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .15rem .6rem; font-size: .72rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.so-chip-gray { background: #f3f4f6; color: #374151; }
.so-chip-blue { background: #eff6ff; color: #1d4ed8; }
.so-chip-amber { background: #fffbeb; color: #b45309; }
.so-chip-green { background: #ecfdf3; color: #067647; }
.so-chip-red { background: #fef3f2; color: #b42318; }
.so-chip-purple { background: #f4f3ff; color: #5925dc; }
.so-empty { padding: 3rem 1rem; text-align: center; color: var(--so-text-3); }
.so-empty b { display: block; color: var(--so-text); font-size: .95rem; margin-bottom: .25rem; }
.so-drawer-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .35); z-index: 60; }
.so-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--so-bg); z-index: 61; display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(16, 24, 40, .16); }
.so-drawer-head { background: #fff; border-bottom: 1px solid var(--so-border); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.so-drawer-body { overflow-y: auto; padding: 1.25rem; flex: 1; }
.so-drawer-foot { background: #fff; border-top: 1px solid var(--so-border); padding: .75rem 1.25rem; display: flex; gap: .5rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.so-section { background: #fff; border: 1px solid var(--so-border); border-radius: var(--so-radius); margin-bottom: 1rem; }
.so-section > h3 { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--so-text-2); padding: .8rem 1rem; border-bottom: 1px solid var(--so-border); }
.so-section-body { padding: 1rem; }
.so-item { padding: .85rem 1rem; border-bottom: 1px solid #f0f1f3; }
.so-item:last-child { border-bottom: 0; }
.so-seg { display: inline-flex; border: 1px solid var(--so-border-strong); border-radius: 8px; overflow: hidden; }
.so-seg button { padding: .4rem .7rem; font-size: .78rem; font-weight: 600; color: var(--so-text-2); background: #fff; border-right: 1px solid var(--so-border-strong); min-width: 44px; }
.so-seg button:last-child { border-right: 0; }
.so-seg button[aria-pressed="true"][data-v="pass"] { background: #ecfdf3; color: #067647; }
.so-seg button[aria-pressed="true"][data-v="fail"] { background: #fef3f2; color: #b42318; }
.so-seg button[aria-pressed="true"][data-v="na"] { background: #f3f4f6; color: #111827; }
.so-seg button[aria-pressed="true"][data-v="not_tested"] { background: #fffbeb; color: #b45309; }
.so-prev { font-size: .74rem; color: var(--so-text-3); }
.so-save-state { font-size: .78rem; color: var(--so-text-3); display: inline-flex; align-items: center; gap: .35rem; }
.so-save-state::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #10b981; }
.so-save-state[data-state="dirty"]::before { background: #f59e0b; }
.so-save-state[data-state="saving"]::before { background: #3b82f6; }
.so-save-state[data-state="error"]::before { background: #ef4444; }
.so-kv { display: grid; grid-template-columns: 140px 1fr; gap: .35rem .75rem; font-size: .85rem; }
.so-kv dt { color: var(--so-text-3); }
.so-key-box { font-family: 'JetBrains Mono', monospace; font-size: .78rem; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: .75rem; word-break: break-all; }

@media (max-width: 640px) {
  .so-kv { grid-template-columns: 1fr; }
  .so-drawer-body { padding: .75rem; }
  .so-seg button { min-width: 52px; padding: .55rem .6rem; }
}

/* Approved ManoIQ Studio design, 2026-09-26.
 * Screen-only presentation. Tenant branding, document rendering and business
 * logic remain authoritative. No hard-coded company identity or sample data. */
@media screen {
  :root { --so-bg:#f7f7fb; --so-surface:#fff; --so-border:#e9e9f1; --so-border-strong:#d6d6e3; --so-text:#242435; --so-text-2:#525367; --so-text-3:#68697c; --so-radius:18px; --so-radius-sm:9px; --so-shadow:0 2px 8px rgb(30 25 60 / .025); }
  body { background:var(--so-bg); color:var(--so-text); }
  #sidebar { background:var(--so-surface) !important; border-right:1px solid var(--so-border); }
  .sidebar-brand { padding:1.5rem 1.1rem; border-bottom:1px solid var(--so-border); }
  .so-brand-logo { box-shadow:none; border:1px solid var(--so-border); border-radius:12px; }
  .so-brand-company { color:var(--so-text); font-size:.9rem; line-height:1.4; font-weight:650; }
  .so-brand-product { color:var(--so-text-3); font-size:.7rem; letter-spacing:.06em; }
  #sidebar .nav-group-label { color:var(--so-text-3); font-size:.69rem; letter-spacing:.1em; padding:1.15rem .8rem .5rem; }
  #sidebar .navlink { color:var(--so-text-2); padding:.68rem .8rem; font-weight:500; border-radius:10px; }
  #sidebar .navlink:hover { background:#f4f3f9; color:var(--so-text); }
  #sidebar .navlink.active { background:rgb(var(--so-accent-500) / .1) !important; color:var(--so-text); font-weight:650; }
  #sidebar .navlink.active::before { display:none; }
  #sidebar .navlink.active .ic { color:var(--so-text); }
  #sidebar .sidebar-footer-build { border-color:var(--so-border); }
  #sidebar .so-build { color:var(--so-text-3) !important; font-size:.7rem; }
  #appHeader { background:var(--so-surface) !important; backdrop-filter:none; min-height:72px; }
  .header-search { background:var(--so-bg) !important; border:1px solid var(--so-border) !important; padding:.65rem .85rem; }
  .breadcrumb { font-size:.82rem; }
  #app main > .tab-panel { max-width:1600px; margin-inline:auto; }
  .tab-panel h2.text-xl,.so-page-head h2 { font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.2; letter-spacing:-.045em; font-weight:650; color:var(--so-text) !important; }
  .tab-panel h2.text-xl + p,.so-page-head p { margin-top:.5rem; line-height:1.6; color:var(--so-text-3); }
  .so-page-head { margin-bottom:1.7rem; align-items:center; }
  .panel,.stat-card,.so-section { border-color:var(--so-border) !important; border-radius:var(--so-radius) !important; box-shadow:var(--so-shadow) !important; }
  .panel-hoverable:hover,.stat-card:hover { box-shadow:0 5px 18px rgb(30 25 60 / .045) !important; }
  .btn { min-height:40px; padding:.6rem 1rem; font-weight:600 !important; border-radius:9px !important; }
  .btn-ghost { border-color:var(--so-border-strong) !important; }
  .btn:disabled { cursor:not-allowed; opacity:.55; }
  .field-label { font-size:.79rem; text-transform:none; letter-spacing:0; color:var(--so-text-2); }
  .field-input { min-height:42px; background:var(--so-surface); padding:.65rem .8rem; }
  thead th { font-size:.75rem !important; font-weight:500 !important; text-transform:none !important; letter-spacing:0 !important; background:var(--so-bg); padding-top:1rem; padding-bottom:1rem; }
  tbody td { padding-top:.95rem; padding-bottom:.95rem; }
  .badge,.so-chip { font-size:.73rem; letter-spacing:0; font-weight:600; text-transform:none; border-radius:6px; }
  .ws-tab { padding:.75rem 1rem; font-size:.83rem; }
  .so-toolbar { padding:1rem; gap:.75rem; }
  .so-section > h3 { text-transform:none; letter-spacing:0; font-size:.9rem; padding:1.15rem 1.3rem; }
  .so-section-body { padding:1.3rem; }
  .so-drawer-head,.so-drawer-foot { padding:1.2rem 1.5rem; }
  .so-drawer-body { padding:1.5rem; }
  .so-empty { padding:3.5rem 1.5rem; }
  /* The four existing live KPIs retain their IDs and calculation paths. */
  .so-studio-overview { padding:1.4rem; border-radius:20px; gap:0 !important; background:radial-gradient(ellipse at 100% 0%,rgb(var(--so-accent-500) / .32),transparent 65%),linear-gradient(110deg,#242137,#373047); }
  #tab-dashboard .so-studio-overview .stat-card { background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:1rem 1.1rem; min-width:0; }
  #tab-dashboard .so-studio-overview .stat-card + .stat-card { border-left:1px solid rgb(255 255 255 / .18) !important; }
  #tab-dashboard .so-studio-overview .stat-label { color:#ddd8eb !important; font-size:.76rem; letter-spacing:0; text-transform:none; font-weight:500; }
  #tab-dashboard .so-studio-overview .stat-value { color:#fff !important; font-size:clamp(1.5rem,2.5vw,2.2rem); font-weight:500; letter-spacing:-.04em; overflow-wrap:anywhere; }
  #tab-dashboard .so-studio-overview .stat-icon { background:rgb(255 255 255 / .1) !important; color:#eee8ff !important; width:30px; height:30px; }
  #tab-dashboard > .grid:last-child > .panel { padding:1.5rem; }
  #tab-dashboard > .grid:last-child h3 { color:var(--so-text); font-size:.95rem; }
  #soSetNav { box-shadow:none !important; background:transparent; border:0 !important; }
  #soSetNav button { padding:.75rem .85rem; border-radius:9px; color:var(--so-text-2); }
  #soSetNav button[aria-current="page"] { background:rgb(var(--so-accent-500) / .1); color:var(--so-text); font-weight:650; }
  #soSetTitle { font-size:1.2rem; letter-spacing:-.02em; margin-bottom:1rem; }
  #soSetBody [aria-label="Logo preview"] { border-radius:14px; background:var(--so-bg); max-width:100%; }
  #soSetBody input[type="color"] { border-radius:50%; overflow:hidden; }
  #loginScreen { background:radial-gradient(ellipse at 80% 10%,rgb(var(--so-accent-500) / .25),transparent 55%),#242137; }
  #loginScreen .panel { border-radius:20px !important; }
  @media(max-width:1100px) and (min-width:768px) { .so-studio-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } #tab-dashboard .so-studio-overview .stat-card:nth-child(3) { border-left:0 !important; } }
  @media(max-width:767px) { .so-studio-overview { padding:.8rem; } #tab-dashboard .so-studio-overview .stat-card:nth-child(3) { border-left:0 !important; } #appHeader { min-height:62px; } .so-page-head { gap:1rem; } }
  @media(max-width:420px) { .so-studio-overview { grid-template-columns:1fr; } #tab-dashboard .so-studio-overview .stat-card + .stat-card { border-left:0 !important; border-top:1px solid rgb(255 255 255 / .18) !important; } }
  @media(pointer:coarse) { .btn,#soSetNav button,.navlink,.ws-tab { min-height:44px; } }
  @media(prefers-reduced-motion:reduce) { .btn,.navlink,.stat-card,tbody tr { transition:none !important; } }
}

/* ManoIQ 09 — approved earthy product identity, 2026-09-29.
 * Presentation only; tenant letterheads and document branding remain intact. */
@media screen {
  :root {
    --mi-primary:#28342d; --mi-secondary:#6f8791; --mi-accent:#ad684b;
    --mi-paper:#f7f3ea; --mi-canvas:#eeece7; --mi-ink:#28342d;
    --mi-muted:#6d746f; --mi-line:#dedbd2;
    --mi-blue:#496b7d; --mi-blue-soft:#e7eef1;
    --mi-clay:#9b513b; --mi-clay-soft:#f2e2dc;
    --mi-moss:#637957; --mi-moss-soft:#e4eadf;
    --mi-ochre:#9a752e; --mi-ochre-soft:#f3ead7;
    --mi-plum:#725f72; --mi-plum-soft:#ebe5eb;
    --so-bg:var(--mi-canvas); --so-surface:#fffdfa; --so-border:var(--mi-line);
    --so-border-strong:#cbc7bd; --so-text:var(--mi-ink); --so-text-2:#505b54;
    --so-text-3:var(--mi-muted); --so-radius:16px; --so-radius-sm:9px;
    --so-shadow:0 1px 2px rgb(40 52 45 / .04),0 8px 28px rgb(40 52 45 / .045);
  }
  body { background:var(--mi-canvas); color:var(--mi-ink); }
  #sidebar { background:#fffdfa !important; border-right:1px solid var(--mi-line) !important; }
  .sidebar-brand { border-bottom:1px solid var(--mi-line); }
  .so-brand-logo { background:var(--mi-primary); border:0; box-shadow:none; }
  .so-brand-company { color:var(--mi-ink); }
  .so-brand-product,#sidebar .nav-group-label,#sidebar .so-build { color:var(--mi-muted) !important; }
  #sidebar .navlink { color:#556058; border-radius:10px; }
  #sidebar .navlink:hover { background:#f3f0e9; color:var(--mi-ink); }
  #sidebar .navlink.active { background:#e8ece7 !important; color:var(--mi-primary); font-weight:700; }
  #sidebar .navlink.active::before { display:none; }
  #sidebar .navlink.active .ic { color:var(--mi-primary); }
  #sidebar [data-tab="crm"] .ic { color:var(--mi-blue); }
  #sidebar [data-tab="estimating"] .ic,#sidebar [data-tab="docs"] .ic { color:var(--mi-clay); }
  #sidebar [data-tab="projects"] .ic,#sidebar [data-tab="calendar"] .ic { color:var(--mi-moss); }
  #sidebar [data-tab="fire-reports"] .ic { color:var(--mi-ochre); }
  #sidebar [data-tab="expenses"] .ic { color:var(--mi-plum); }
  #sidebar [data-tab="crm"].active { background:var(--mi-blue-soft) !important; }
  #sidebar [data-tab="estimating"].active,#sidebar [data-tab="docs"].active { background:var(--mi-clay-soft) !important; }
  #sidebar [data-tab="projects"].active,#sidebar [data-tab="calendar"].active { background:var(--mi-moss-soft) !important; }
  #sidebar [data-tab="fire-reports"].active { background:var(--mi-ochre-soft) !important; }
  #sidebar [data-tab="expenses"].active { background:var(--mi-plum-soft) !important; }
  #appHeader { background:rgb(255 253 250 / .94) !important; border-bottom-color:var(--mi-line) !important; backdrop-filter:blur(10px); }
  .header-search { background:#f3f0e9 !important; border-color:transparent !important; }
  .header-search:hover { background:#fffdfa !important; border-color:var(--mi-line) !important; }
  .panel,.stat-card,.so-section { background:#fffdfa; border-color:var(--mi-line) !important; box-shadow:var(--so-shadow) !important; }
  .panel-hoverable:hover,.stat-card:hover { box-shadow:0 12px 32px rgb(40 52 45 / .09) !important; transform:translateY(-1px) !important; }
  .tab-panel h2.text-xl,.so-page-head h2 { color:var(--mi-ink) !important; font-weight:720; letter-spacing:-.035em; }
  .btn-primary { background:var(--mi-primary) !important; color:var(--mi-paper) !important; }
  .btn-accent { background:var(--mi-accent) !important; color:#fffaf5 !important; }
  .btn-accent:hover { background:#96583f !important; }
  .btn-ghost { background:#fffdfa !important; color:var(--mi-ink) !important; border-color:var(--mi-line) !important; }
  .btn-ghost:hover { background:#f5f1e9 !important; }
  .btn:focus-visible,.field-input:focus { outline:2px solid color-mix(in srgb,var(--mi-accent) 60%,white) !important; outline-offset:2px; box-shadow:none !important; }
  .field-input { background:#fffdfa; border-color:var(--mi-line) !important; }
  thead th { background:#f4f1ea; color:#626a64 !important; }
  tbody tr:hover { background:#f7f3ea; }
  .stat-navy .stat-icon { background:#e8ece7 !important; color:var(--mi-primary) !important; }
  .stat-blue .stat-icon { background:var(--mi-blue-soft) !important; color:var(--mi-blue) !important; }
  .stat-blue .stat-value { color:var(--mi-blue) !important; }
  .stat-amber .stat-icon { background:var(--mi-ochre-soft) !important; color:var(--mi-ochre) !important; }
  .stat-amber .stat-value { color:var(--mi-ochre) !important; }
  .stat-green .stat-icon { background:var(--mi-moss-soft) !important; color:var(--mi-moss) !important; }
  .stat-green .stat-value { color:var(--mi-moss) !important; }
  .panel.stat-navy { border-top-color:var(--mi-primary) !important; }
  .panel.stat-blue { border-top-color:var(--mi-blue) !important; }
  .panel.stat-amber { border-top-color:var(--mi-ochre) !important; }
  .panel.stat-green { border-top-color:var(--mi-moss) !important; }
  .so-studio-overview { background:linear-gradient(125deg,var(--mi-primary),#3f5147 62%,#596b5d) !important; }
  #tab-dashboard .so-studio-overview .stat-icon { background:rgb(247 243 234 / .12) !important; color:var(--mi-paper) !important; }
  #loginScreen { background:radial-gradient(circle at 78% 16%,rgb(173 104 75 / .3),transparent 34%),linear-gradient(145deg,#1f2923,var(--mi-primary) 56%,#3c4c42) !important; }
  #loginScreen [data-brand-logo="product"] { width:80px; height:80px; border-radius:20px; box-shadow:0 18px 44px rgb(0 0 0 / .24); }
  .ws-tab.active { color:var(--mi-primary); border-bottom-color:var(--mi-accent); background:#f3f0e9; }
  #soSetNav button[aria-current="page"] { background:var(--mi-clay-soft); color:var(--mi-clay); }
  .so-drawer,.so-drawer-head,.so-drawer-foot { background:#fffdfa; }
}

/* CRM-PIPELINE-03: pipeline board (Kanban pattern), cards, follow-ups, timeline. Uses the theme tokens above; no new colours. */
.so-pipe-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: space-between; padding: 1rem 1rem .5rem; }
.so-pipe-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--so-text); }
.so-pipe-sub { font-size: .85rem; color: var(--so-text-3); margin-top: .15rem; max-width: 46rem; }
.so-muted { color: var(--so-text-3); }
.so-seg { display: inline-flex; border: 1px solid var(--so-border-strong); border-radius: var(--so-radius-sm); overflow: hidden; background: var(--so-surface); }
.so-seg button { padding: .35rem .8rem; font-size: .8rem; font-weight: 600; color: var(--so-text-2); }
.so-seg button + button { border-left: 1px solid var(--so-border-strong); }
.so-seg button[aria-pressed="true"] { background: var(--so-text); color: #fff; }
.so-board { display: flex; gap: .75rem; padding: .75rem; overflow-x: auto; scroll-snap-type: x proximity; align-items: flex-start; }
.so-col { flex: 0 0 272px; scroll-snap-align: start; background: var(--so-bg); border: 1px solid var(--so-border); border-radius: var(--so-radius); display: flex; flex-direction: column; max-height: 72vh; }
.so-col-over { outline: 2px dashed var(--so-text-3); outline-offset: -4px; }
.so-col-head { padding: .7rem .8rem .5rem; border-bottom: 1px solid var(--so-border); }
.so-col-head b { font-size: .82rem; letter-spacing: .01em; }
.so-col-count { display: inline-block; min-width: 1.4rem; text-align: center; font-size: .72rem; font-weight: 700; color: var(--so-text-2); background: var(--so-surface); border: 1px solid var(--so-border); border-radius: 999px; padding: 0 .4rem; }
.so-col-total { font-size: .75rem; font-weight: 600; color: var(--so-text-2); margin-top: .1rem; }
.so-col-total.so-muted { font-weight: 400; color: var(--so-text-3); }
.so-col-body { padding: .6rem; display: grid; gap: .5rem; overflow-y: auto; min-height: 3rem; }
.so-col-empty { font-size: .78rem; color: var(--so-text-3); text-align: center; padding: .9rem 0; }
.so-col-add { margin: 0 .6rem .6rem; padding: .45rem; font-size: .78rem; font-weight: 600; color: var(--so-text-2); border: 1px dashed var(--so-border-strong); border-radius: var(--so-radius-sm); }
.so-col-add:hover { background: var(--so-surface); }
.so-card { background: var(--so-surface); border: 1px solid var(--so-border); border-radius: var(--so-radius-sm); padding: .6rem .65rem; box-shadow: var(--so-shadow); cursor: grab; }
.so-card:hover, .so-card:focus-visible { box-shadow: var(--so-shadow-lg); border-color: var(--so-border-strong); outline: none; }
.so-card:focus-visible { outline: 2px solid var(--so-text); outline-offset: 1px; }
.so-card-top { display: flex; gap: .4rem; align-items: flex-start; justify-content: space-between; }
.so-card-title { font-weight: 600; font-size: .86rem; text-align: left; color: var(--so-text); line-height: 1.25; }
.so-card-title:hover { text-decoration: underline; }
.so-card-menu { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: 6px; font-size: 1.1rem; line-height: 1; color: var(--so-text-2); }
.so-card-menu:hover, .so-card-menu:focus-visible { background: var(--so-bg); }
.so-card-sub { font-size: .75rem; color: var(--so-text-3); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-card-meta { font-size: .76rem; color: var(--so-text-2); margin-top: .25rem; }
.so-card-foot { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .5rem; }
.so-avatar { margin-left: auto; width: 1.45rem; height: 1.45rem; border-radius: 999px; background: var(--so-text); color: #fff; font-size: .62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.so-row { cursor: pointer; }
.so-row:hover, .so-row:focus-visible { background: var(--so-bg); outline: none; }
.so-menu { position: fixed; z-index: 80; width: 210px; background: var(--so-surface); border: 1px solid var(--so-border-strong); border-radius: var(--so-radius-sm); box-shadow: var(--so-shadow-lg); padding: .25rem; display: grid; }
.so-menu button { text-align: left; padding: .45rem .6rem; font-size: .82rem; border-radius: 6px; color: var(--so-text); }
.so-menu button:hover, .so-menu button:focus-visible { background: var(--so-bg); outline: none; }
.so-follow { border-bottom: 1px solid var(--so-border); padding: .6rem .9rem; background: var(--so-surface); }
.so-follow-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.so-follow-row { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; border-top: 1px solid #f0f1f3; font-size: .85rem; }
.so-follow-title { flex: 1; min-width: 0; }
.so-dialog { position: fixed; left: 50%; top: max(1rem, 12vh); max-height: calc(100vh - 2rem); overflow-y: auto; transform: translateX(-50%); width: min(420px, calc(100vw - 2rem)); background: var(--so-surface); border-radius: var(--so-radius); box-shadow: var(--so-shadow-lg); padding: 1.1rem; }
.so-quote { border-left: 3px solid var(--so-border-strong); padding: .1rem .75rem; color: var(--so-text-2); white-space: pre-wrap; }
.so-tl { display: flex; gap: .6rem; padding: .55rem 0; border-top: 1px solid #f0f1f3; }
.so-tl:first-child { border-top: 0; }
.so-tl .so-chip { flex: 0 0 auto; align-self: flex-start; }
.so-tl-body { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .so-col { flex-basis: 86vw; } .so-pipe-head { padding: .85rem .85rem .4rem; } }
.so-busy { opacity: .6; pointer-events: none; cursor: progress; transition: opacity .15s; }
.so-notice { margin: .5rem .75rem 0; padding: .5rem .75rem; border: 1px solid #f3d9a4; background: #fffbeb; color: #8a4b08; border-radius: var(--so-radius-sm); font-size: .8rem; }
/* Follow-up emails (CRM-FOLLOWUP-EMAIL-04) */
.so-fu-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: flex-start; padding: .75rem 0; border-top: 1px solid var(--so-line, #e3e1d8); }
.so-fu-main { flex: 1 1 320px; min-width: 0; }
.so-fu-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.so-fu-h { margin: 1rem 0 .25rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.so-fu-body { white-space: pre-wrap; word-break: break-word; margin: .5rem 0 0; padding: .6rem .75rem; background: #f8f7f2; border: 1px solid var(--so-line, #e3e1d8); border-radius: var(--so-radius-sm); font: inherit; font-size: .85rem; }

/* CRM-ROI-05: lead sources and results */
.so-roi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.so-roi-tile { border: 1px solid var(--so-border); border-radius: var(--so-radius-sm); padding: 10px 12px; background: var(--so-bg); }
.so-roi-num { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--so-text); }
.so-roi-frame { border: 1px solid var(--so-border); border-radius: var(--so-radius-sm); overflow-x: auto; background: var(--so-surface); }
.so-roi-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; color: var(--so-text); }
.so-roi-table th, .so-roi-table td { padding: 8px 10px; border-bottom: 1px solid var(--so-border); white-space: nowrap; }
.so-roi-table thead th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--so-text-3); }
.so-roi-table tbody tr:last-child th, .so-roi-table tbody tr:last-child td { border-bottom: 0; }
.so-roi-table th[scope="row"] { font-weight: 600; white-space: normal; min-width: 150px; }
.so-roi-drill { margin-top: 12px; }