/* ===================================================================== Orchestrator — Unified Theme (UI Cohesion Polish) v: 20260529a Injected into every dashboard page (after page inline styles) via injectSidebar() in api.js. Served live from public/theme.css. Goal: one cohesive blue-tinted dark identity ("from the same hand"). Strategy: redefine the shared design tokens that ~90% of pages already consume via var(); core tokens use !important so they win regardless of each page's local :root drift. NO structural/layout rewrites here — only tokens, fonts, safe global polish, and a few mobile-overflow fixes. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---- Canonical design tokens (blue-tinted dark) -------------------- */ :root { /* Surfaces */ --surface-900: #0a0a0f !important; /* page background */ --surface-800: #12121a !important; /* cards / topbar */ --surface-700: #1a1a25 !important; /* hover / elevated */ --surface-600: #24243a !important; /* chips / inputs */ --bg: #0a0a0f !important; /* engines-family alias */ --bg-elevated: #12121a !important; --surface: #12121a !important; --surface2: #1a1a25 !important; --card: #12121a !important; --panel: #12121a !important; /* Borders / lines */ --border: #2a2a3d !important; --line: #2a2a3d !important; --line-2: #24243a !important; --rule: #2a2a3d !important; /* Text */ --text-primary: #e4e4ef !important; --text-secondary: #9494a8 !important; --text: #e4e4ef !important; --text2: #9494a8 !important; --ink: #e4e4ef !important; --ink-soft: #9494a8 !important; --muted: #9494a8 !important; --fg: #e4e4ef !important; /* Accent — unified indigo (blue-ish) */ --accent: #6366f1 !important; --accent-hover: #818cf8 !important; --accent2: #818cf8 !important; --accent-soft: rgba(99,102,241,0.15) !important; --primary: #6366f1 !important; --product-accent: #6366f1 !important; --product-accent-hover: #818cf8 !important; --violet: #818cf8 !important; --info: #6366f1 !important; /* Status */ --success: #22c55e !important; --error: #ef4444 !important; --warning: #f59e0b !important; --ok: #22c55e !important; --good: #22c55e !important; --green: #22c55e !important; --bad: #ef4444 !important; --err: #ef4444 !important; --red: #ef4444 !important; --warn: #f59e0b !important; --orange: #f59e0b !important; /* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; /* Radius scale (used by the few pages that reference it) */ --radius-sm: 8px !important; --radius-md: 12px !important; --radius-lg: 14px !important; --radius-pill: 999px !important; } /* ---- Base normalization (wins via document order; placed last) ----- */ html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* keep monospace where intended */ code, pre, kbd, samp, .mono, [class*="mono"] { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; } /* Cohesive selection + scrollbar (cosmetic, safe) */ ::selection { background: rgba(99,102,241,0.30); color: #fff; } * { scrollbar-color: #2a2a3d transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #24243a; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: #2f2f48; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } /* Indigo focus ring for inputs/buttons that don't define their own */ :focus-visible { outline: 2px solid rgba(99,102,241,0.55); outline-offset: 2px; } /* ---- Mobile overflow / responsive fixes (≤640px) ------------------- */ @media (max-width: 640px) { body { overflow-x: hidden; } /* action rows that pack input + buttons in one non-wrapping flex row */ .create-bar { flex-wrap: wrap !important; } .create-bar > input, .create-bar > button { width: 100% !important; flex: 1 1 100% !important; } /* generous side padding shrink so content isn't cramped/clipped */ .container { padding-left: 16px !important; padding-right: 16px !important; } /* topbar should never force horizontal scroll */ .topbar { padding-left: 16px !important; padding-right: 16px !important; } /* Wide data tables: keep them inside their own horizontal-scroll box instead of widening the whole page (display:block keeps cell alignment via an anonymous table box). Fixes link-tracker/funnel-hub/products-hub/etc. */ table { display: block !important; overflow-x: auto !important; max-width: 100% !important; -webkit-overflow-scrolling: touch; } /* Let form controls shrink inside non-wrapping flex rows (input/slider + button) so the trailing button isn't pushed off-screen. Fixes ideation/hooks/render. */ input, select, textarea { min-width: 0 !important; max-width: 100% !important; } /* Cramped 2-up persona cards → single column on phones (avatar/date overlap). */ .tiles-grid { grid-template-columns: 1fr !important; } /* Breadcrumb card keeps a 16px side gutter on phones (desktop centers it). */ .step-nav { margin-left: 16px !important; margin-right: 16px !important; } /* Headline-variant rows: let the non-shrinking action buttons wrap BELOW the full-width headline instead of squeezing it to one-word-per-line. */ .variant-item { flex-wrap: wrap !important; } .variant-item > :first-child { flex: 1 1 100% !important; min-width: 0 !important; } } /* ===================================================================== PHASE 4 — Layout & navigation cohesion ===================================================================== */ /* Unified content width across every dashboard (both wrapper classes) */ /* Uniform content column EVERYWHERE: 1200px outer (border-box, so padding never pushes it to 1248), 24px side gutter → 1152px inner. Covers both wrapper classes AND the offer breadcrumb wrapper #step-nav (which carried per-page inline max-widths of 1000/1180/…). */ .container, .page-wrap { max-width: 1200px !important; box-sizing: border-box !important; padding-left: 24px !important; padding-right: 24px !important; margin-left: auto !important; margin-right: auto !important; } /* #step-nav wrapper: NO own side padding (it's sometimes nested inside .container, which would double the gutter → 1104). It just defines the 1200 column. */ #step-nav { max-width: 1200px !important; box-sizing: border-box !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* The breadcrumb CARD itself = 1152px (= 1200 column − 2×24 gutter, matching the content inner width), centered — identical on every dashboard. */ .step-nav { max-width: 1152px !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; } /* Unified topbar frame — every topbar looks identical (sticky, surface bar) */ .topbar { background: var(--surface-800) !important; border-bottom: 1px solid var(--border) !important; position: sticky !important; top: 0 !important; z-index: 50 !important; padding-top: 14px !important; padding-bottom: 14px !important; min-height: 58px !important; display: flex !important; align-items: center !important; gap: 16px !important; } .topbar h1 { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.01em; margin: 0 !important; line-height: 1.3 !important; } /* Lock a consistent top-bar height everywhere (page margin-resets vary, which changed the injected

's box and thus the bar height). */ .topbar { height: 58px !important; min-height: 58px !important; box-sizing: border-box !important; } .topbar > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* Consistent topbar layout: burger+title packed left, right-side group pushed right */ .topbar { justify-content: flex-start !important; } .topbar-right { margin-left: auto !important; } #orch-hamburger { flex: 0 0 auto !important; } /* The fixed fallback burger (pages with no topbar/step-nav) sits top-left by default and can overlap a top-left "Back" link/title — move it to top-right. */ #orch-hamburger[style*="position:fixed"], #orch-hamburger[style*="position: fixed"] { left: auto !important; right: 14px !important; } /* Single canonical back affordance: hide the redundant topbar "Back to Hub" link on step pages whose breadcrumb (.step-nav-back) already has a back arrow. */ body:has(.step-nav-back) .topbar a[href="/offer-hub"] { display: none !important; } /* Engines pages (creative/helper) carry a redundant topbar back AND a body back. Keep the contextual body .back-link; hide the redundant topbar .back-btn so the topbar is just burger + title (consistent with the rest of the app). */ body:has(.back-link) .back-btn { display: none !important; } /* Active breadcrumb chip always indigo (belt-and-suspenders over tokens) */ .step-chip.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } /* Primary / continue action buttons → consistent indigo (never stray green/purple) */ .continue-btn, .btn-continue, .btn-next { background: var(--accent) !important; color: #fff !important; border: none !important; } /* Unify the green-tinted .btn-success action/"Continue to…" buttons to indigo, keeping the same subtle weight. Action buttons are indigo; green is for status badges only. (Fixes the offer-v2 green-vs-blue Continue inconsistency.) */ .btn-success { background: rgba(99,102,241,0.15) !important; border-color: var(--accent) !important; color: var(--accent-hover) !important; } .btn-success:hover { background: rgba(99,102,241,0.28) !important; } /* Off-palette teal "Re-apply" action button → indigo (status-cyan elsewhere is left intact). */ .apply-btn, button.apply-btn { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }