:root {
  --ink: #111111;
  --muted: #77727f;
  --soft: #f7f7f7;
  --line: #e8e5ed;
  --green: #aaf63a;
  --lime: #aaf63a;
  --dark: #111111;
  --purple: #681fff;
  --purple-soft: #f2ebff;
  --white: #ffffff;
}

html, body, button, input, select { font-family: Onest, Arial, sans-serif; }
body { background: var(--soft); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ROI identity and the Workspace name are separate, as in the brand guidelines. */
.brand { gap: 12px; font-family: Onest, Arial, sans-serif; }
.roi-mark { display: block; width: 34px; height: 34px; flex: none; }
.brand-word { display: flex; flex-direction: column; gap: 3px; font-size: 20px; font-weight: 700; letter-spacing: -.045em; line-height: 1; color: var(--ink); }
.brand-word small { font-size: 8px; font-weight: 700; letter-spacing: .18em; color: var(--purple); }
.side-brand .roi-mark { width: 29px; height: 29px; }
.side-brand .brand-word { font-size: 18px; }

/* Login remains fully light, with the ROI colors carrying the emphasis. */
.login-story { color: var(--ink); background: linear-gradient(145deg, #fff 0%, #fff 52%, #f4efff 100%); border-right: 1px solid var(--line); }
.login-story:before { background: radial-gradient(circle at 96% 83%, #681fff16 0, transparent 38%); }
.login-panel { background: var(--soft); }
.story-body .eyebrow, .eyebrow { color: var(--purple); }
.story-body h1, .login-card h2, .page-header h1, .section-head h2, .card-heading h3, .metric-value, .donut-center strong, .efficiency-row strong { font-family: Onest, Arial, sans-serif; }
.story-body h1 { font-weight: 700; letter-spacing: -.065em; }
.story-body h1 em { color: var(--purple); }
.story-body p { color: #65616c; }
.story-mini { border-top: 1px solid #ded7eb; padding-top: 22px; }
.story-mini-icon { border-color: #d6c7f8; color: var(--ink); background: var(--green); }
.story-mini small, .story-footer { color: #77717d; }
.ambient { border-color: #681fff19; }
.login-topline { color: #726886; }
.status-dot, .preview-pill i { background: var(--green); box-shadow: 0 0 0 3px #aaf63a38; }
.login-icon { color: var(--purple); border-color: #e5dbfb; background: #fff; }
.login-icon img { display: block; width: 26px; height: 26px; }
.login-card > p, .login-bottom { color: #77727f; }
.login-card input { border-color: #ddd7e6; }
.login-card input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #681fff1a; }
.password-wrap button { color: var(--purple); }
.primary-button { background: var(--purple); color: #fff; box-shadow: 0 12px 24px #681fff24; }
.primary-button:hover { background: #5016d6; }
.demo-note { background: #f1ebfc; border-color: #e5dafa; color: #625570; }
.demo-note > span:first-child { color: var(--purple); }

/* White workspace surfaces. */
.sidebar, .topbar, .metric-card, .card { background: #fff; }
.sidebar, .topbar, .metric-card, .card { border-color: var(--line); }
.metric-card, .card { box-shadow: 0 6px 22px #26154308; }
.workspace-label, .nav-caption { color: #918b99; }
.workspace-card { border-color: var(--line); box-shadow: none; }
.workspace-avatar { background: var(--purple-soft); color: var(--purple); }
.workspace-card small, .source-side small { color: #8b8494; }
.nav-item { color: #706a78; }
.nav-item:hover { background: #f7f3ff; }
.nav-item.active { background: var(--purple-soft); color: var(--purple); }
.nav-tail { color: #a69ab5; }
.source-icon.shopify { background: #efffda; color: #385d08; }
.source-icon.meta { background: var(--purple-soft); color: var(--purple); }
.source-led { border-color: #cfc8d7; }
.side-help { background: #f5f0ff; color: #4b3476; }
.side-help small { color: #867a99; }
.logout-button { color: #797180; }
.breadcrumb { color: #867f8e; }
.breadcrumb strong { color: var(--ink); }
.breadcrumb span { color: #b6aabc; }
.preview-pill { background: #f2ebff; border-color: #e2d2ff; color: var(--purple); }
.topbar-divider { background: var(--line); }
.user-avatar { background: var(--purple); color: #fff; }
.menu-button { color: var(--purple); }
.title-period { color: var(--purple); }
.page-header p { color: #77727f; }
.period-select, .outline-button { border-color: #ded9e5; color: #514a5c; }
.period-select select { color: #514a5c; }
.period-select > span:first-child { color: var(--purple); }
.outline-button:hover { background: #f7f3ff; }
.notice { background: #f3edff; border-color: #e5d9ff; color: #645178; }
.notice strong, .notice-icon { color: var(--purple); }
.notice button { color: #8d79aa; }
.section-kicker, .section-extra { color: #897e99; }
.metric-top { color: #716a79; }
.metric-icon { background: var(--purple-soft); color: var(--purple); }
.metric-detail, .metric-bottom { color: #857e8c; }
.delta, .status-active, .sku-share { background: #edffd5; color: #385d08; }
.chart-legend { color: #7e7588; }
.legend-revenue { background: var(--purple); }
.legend-spend { background: var(--green); }
.chart-y, .chart-x { color: #8c8594; }
.chart-grid span { border-color: #eae5f0; }
.chart-main { cursor: crosshair; }
#trendChart:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.chart-hover-guide { position: absolute; top: 0; bottom: 20px; border-left: 1px dashed #a784f4; pointer-events: none; z-index: 2; }
.chart-hover-point { position: absolute; width: 12px; height: 12px; border: 3px solid var(--purple); border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px #681fff1b; pointer-events: none; z-index: 3; }
.chart-tooltip { position: absolute; z-index: 4; min-width: 172px; padding: 10px 13px; border: 1px solid #e4d9f5; border-radius: 9px; background: #fff; box-shadow: 0 12px 30px #27154420; transform: translate(-50%, -100%); pointer-events: none; color: var(--ink); font-size: 12px; }
.chart-tooltip.below { transform: translateX(-50%); }
.chart-tooltip-date { display: block; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #eee8f6; font-weight: 700; }
.chart-tooltip-label { color: #746a82; margin-right: 6px; }
.chart-tooltip strong { color: var(--purple); white-space: nowrap; }
.circle-more { border-color: var(--line); color: #857b91; }
.donut { background: conic-gradient(var(--purple) 0 58%, var(--green) 58% 80%, #c8aeff 80% 93%, #eeeaf4 93% 100%); }
.donut-center span { color: #8b8293; }
.channel-row { color: #645d6d; }
.channel-row strong { color: var(--ink); }
.card-foot { border-color: var(--line); color: #8d8495; }
.card-heading p { color: #857d8d; }
.subtle-tag { background: var(--purple-soft); color: var(--purple); }
th { background: #faf8fd; color: #817787; }
td { border-color: #eeeaf2; color: #635c6b; }
td:first-child { color: var(--ink); }
.roas-value { color: var(--purple); }
.efficiency-row { border-color: #eeeaf2; color: #6c6473; }
.efficiency-row strong { color: var(--ink); }
.efficiency-note { background: #f4efff; color: #746684; }
.efficiency-note span { color: var(--purple); }
.orders-average { background: #efffda; color: #41660d; }
.dashboard-footer, .dashboard-footer b { color: #8c8494; }
.custom-period { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 18px 20px; margin: 0 0 20px; background: #fff; border: 1px solid #e6dff0; border-radius: 14px; box-shadow: 0 8px 25px #2715440a; }
.custom-period[hidden] { display: none; }
.custom-period-heading { display: flex; flex-direction: column; gap: 3px; flex: 1 1 195px; }
.custom-period-heading strong { color: var(--ink); font-size: 15px; }
.custom-period-heading span { color: #857d8d; font-size: 12px; }
.custom-period label { display: flex; flex-direction: column; gap: 5px; color: #5b5365; font-size: 12px; font-weight: 700; }
.custom-period input { min-height: 42px; padding: 8px 11px; border: 1px solid #d9cfeb; border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 14px; }
.custom-period input:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.custom-period-apply { min-height: 42px; padding: 8px 17px; border: 0; border-radius: 8px; background: var(--purple); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.custom-period-apply:hover { background: #5016d1; }
.custom-period-error { flex: 1 0 100%; margin: 0; color: #b33d3d; font-size: 12px; }
.custom-period-error[hidden] { display: none; }

@media (max-width: 720px) {
  .sidebar { box-shadow: 20px 0 50px #25133d1e; }
  .sidebar-backdrop:not([hidden]) { background: #21152d9c; }
  .login-story { min-height: 310px; }
  .story-mini { margin-top: 24px; }
}