/* Woptimo brand charter (copied from the shared Woptimo charter, September 2026) — demo hub. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,400&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --bg: #F7F6F9;
  --panel: #ffffff;
  --panel-2: #F5F3FA;
  --ink: #14102B;
  --ink-2: #413C5E;
  --ink-3: #565073;
  --line: #E8E6EE;
  --line-soft: #F5F3FA;
  --accent: #3A1FAF;
  --accent-soft: #E4E0F4;
  --warn: #C62B36;
  --warn-soft: #FCE8E9;
  --good: #0E8A5F;
  --good-soft: #E3F5EE;
  --bad: #C62B36;
  --bad-soft: #FCE8E9;
  --alert: #B26A00;
  --alert-soft: #FDF1DC;
  --info: #1F6FD0;
  --info-soft: #E6F0FC;
  --m1: #3A1FAF;
  --m2: #00A6A0;
  --m3: #FF6B4A;
  --b1: #3A1FAF;
  --b2: #5A3DBE;
  --b3: #7F66CB;
  --b4: #00A6A0;
  --b5: #0E5A8A;
  --b6: #FFB703;
  --tip-bg: #14102B;
  --tip-fg: #F7F6F9;
  --shadow: 0 1px 2px rgba(20, 16, 43, .05), 0 12px 30px -20px rgba(26, 14, 74, .45);
  --radius: 14px;
  --nav: #1A0E4A;
  --nav-fg: #F7F6F9;
}

[data-theme="dark"] {
  --bg: #14102B;
  --panel: #231C46;
  --panel-2: #1A0E4A;
  --ink: #F7F6F9;
  --ink-2: #C7C4D3;
  --ink-3: #C7C4D3;
  --line: #332C57;
  --line-soft: #2A2450;
  --accent: #A796DC;
  --accent-soft: #26146B;
  --warn: #FF8A90;
  --warn-soft: #3A1820;
  --good: #3DDC97;
  --good-soft: #143028;
  --bad: #FF8A90;
  --bad-soft: #3A1820;
  --alert: #FFD27A;
  --alert-soft: #3A2C12;
  --info: #9CC4F5;
  --info-soft: #152840;
  --m1: #A796DC;
  --m2: #5ED6D1;
  --m3: #FF8A70;
  --tip-bg: #F7F6F9;
  --tip-fg: #14102B;
  --nav: #120A32;
  --nav-fg: #F7F6F9;
}

body {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--ink);
}
h1, h2, h3, .sidenav-name, .kpi-value, .section-title {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
h1 { font-size: 1.7rem; line-height: 1.15; }
h2 { font-size: 1.15rem; }
.sidenav { width: 248px; background: var(--nav); }
.sidenav-name { font-size: 1rem; }
.sidenav-sub { letter-spacing: 0.01em; }
.nav-item.on, .nav-item:hover { background: rgba(247, 246, 249, .1); }
.nav-item.on {
  font-weight: 600;
  box-shadow: inset 3px 0 0 #C9C0EA;
}
.eyebrow { letter-spacing: 0.14em; }
.chapeau {
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 68ch;
  margin: 4px 0 16px;
}
.insight {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  margin: 0 0 18px;
  font-family: Newsreader, Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.45;
}
.insight p + p { margin-top: 6px; }
.section-title { margin: 8px 0 10px; font-size: 1.05rem; }
.section-label {
  font-family: Inter, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 0 8px;
}
.delta-up { color: var(--good); font-weight: 600; }
.delta-down { color: var(--bad); font-weight: 600; }
.delta-flat { color: var(--ink-3); }
.kpi { border-left-width: 4px; }
.kpi-label { color: var(--ink-3); letter-spacing: .08em; }
.kpi-value { font-size: 1.65rem; }
.kpi-sub { line-height: 1.4; }
.home-block { margin-bottom: 8px; }
.grid.home { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
a.card .id { margin-bottom: 4px; }
.empty {
  color: var(--ink-2);
  font-size: .9rem;
  padding: 8px 0 4px;
}
.banner {
  background: var(--info-soft);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--info) 35%, transparent);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: .88rem;
  line-height: 1.45;
}
.banner strong { font-weight: 600; }
.banner.alert {
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  border-left: 4px solid var(--warn);
}
.banner.alert::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 8px;
  vertical-align: -1px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--warn);
}
.seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.toolbar .seg + .seg { margin-top: 8px; }
.seo-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 8px 12px;
}
.seo-filters .filter-group { display: flex; align-items: center; gap: 8px; }
.seo-filters .filter-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.seo-filters .seg { width: auto; gap: 4px; }
.seo-filters .seg + .seg { margin-top: 0; }
.seo-filters .seg button {
  flex: 0 0 auto;
  padding: 2px 9px;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.4;
}
.two { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
@media (max-width: 1100px) { .two { grid-template-columns: 1fr; } }
.legend-note { font-size: .78rem; color: var(--ink-2); margin: 0 0 8px; }