:root {
  --mc-ink: #111827;
  --mc-copy: #334155;
  --mc-muted: #64748b;
  --mc-line: #d9e1dc;
  --mc-soft: #f6f8f7;
  --mc-green: #285b45;
  --mc-purple: #332031;
  --mc-blue: #1877f2;
  --mc-pink: #e1306c;
  --mc-youtube: #ff0033;
  --mc-google: #4285f4;
}

.mc-dashboard, .mc-dashboard * { box-sizing: border-box; }
.mc-dashboard { width: 100%; max-width: 100%; overflow-x: hidden; color: var(--mc-ink); font: 13px/1.4 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.mc-tour-scrim { display: none; position: fixed; inset: 0; z-index: 80; width: 100vw; height: 100vh; padding: 0; border: 0; border-radius: 0; background: rgba(31, 41, 55, .72); cursor: default; }
.mc-tour-spotlight-active .mc-tour-scrim { display: block; }
.mc-dashboard button, .mc-dashboard input { font: inherit; }
.mc-dashboard button { cursor: pointer; }
.mc-shell { width: 100%; max-width: 100%; display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 860px; overflow: hidden; border: 1px solid var(--mc-line); border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }

.mc-sidebar { position: relative; z-index: 2; border-right: 1px solid var(--mc-line); background: #fff; }
.mc-sidebar nav { padding: 7px; }
.mc-sidebar nav button { width: 100%; min-height: 38px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 23px; align-items: center; gap: 8px; padding: 5px 9px; border: 0; border-radius: 6px; background: transparent; color: #1f2937; text-align: left; }
.mc-sidebar nav button:hover:not(:disabled) { background: #f7f8f8; }
.mc-sidebar nav button.active { color: #fff; background: var(--mc-purple); }
.mc-sidebar nav button:disabled { cursor: default; opacity: .55; }
.mc-sidebar nav b { min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.15; }
.mc-sidebar nav i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #cad4ce; border-radius: 50%; background: #fff; color: var(--mc-green); font-size: 8px; font-style: normal; font-weight: 800; }
.mc-channel-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: #fff; font-size: 11px; font-weight: 900; }
.mc-icon-web { color: #fff; background: var(--mc-purple); }
.mc-icon-facebook { background: var(--mc-blue); }
.mc-icon-instagram { background: var(--mc-pink); }
.mc-icon-threads, .mc-icon-x { color: #111; background: #fff; border: 1px solid #d3d7db; }
.mc-icon-linkedin { background: #0a66c2; }
.mc-icon-pinterest { background: #e60023; }
.mc-icon-tiktok { background: #111; }
.mc-icon-googleBusiness { background: var(--mc-google); }
.mc-icon-youtube { background: var(--mc-youtube); }
.mc-icon-twitch { background: #9146ff; }
.mc-sidebar-tools { margin: 2px 8px 0; padding-top: 6px; border-top: 1px solid var(--mc-line); }
.mc-sidebar-tools button { width: 100%; display: flex; gap: 9px; align-items: center; padding: 7px; border: 0; background: transparent; color: #475569; text-align: left; font-size: 11px; }
.mc-sidebar-tools span { width: 20px; text-align: center; font-size: 15px; }

.mc-main, .mc-viewport, .mc-section, .mc-panel { min-width: 0; max-width: 100%; }
.mc-main { background: #fafbfa; }
.mc-viewport { overflow: visible; }

.mc-platform-head { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .98); border-bottom: 1px solid var(--mc-line); }
.mc-platform-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px 8px; }
.mc-platform-title h2 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.025em; }
.mc-eyebrow { color: var(--mc-muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.mc-cutoff { color: var(--mc-muted); font-size: 10px; }
.mc-subnav { display: flex; gap: 2px; padding: 0 12px; overflow-x: auto; border-bottom: 1px solid var(--mc-line); }
.mc-subnav button { min-height: 36px; padding: 7px 9px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--mc-muted); white-space: nowrap; font-size: 11px; font-weight: 700; }
.mc-subnav button.active { color: var(--mc-green); border-bottom-color: var(--mc-green); }
/* The Sections landmark explains these tabs by name, so the tour must not
   hide the very thing it is pointing at: a hidden target has no position and
   the reveal lands nowhere. */
.mc-tour-mode .mc-platform-head { position: relative; z-index: auto; }  /* z-index:auto matters: sticky + z-index:5 makes this a stacking context,
     which traps the spotlight inside it. Lifting the whole head instead was
     why the Dates and Sections landmarks lit up the same block. */
.mc-filterbar { display: flex; align-items: end; gap: 8px; padding: 9px 18px; }
.mc-filterbar label { display: grid; gap: 3px; color: var(--mc-muted); font-size: 9px; font-weight: 700; }
.mc-filterbar input { height: 31px; padding: 5px 8px; border: 1px solid #c7d1cb; border-radius: 5px; background: #fff; color: var(--mc-ink); font-size: 11px; }
.mc-filterbar button, .mc-table-tools button { height: 31px; padding: 5px 10px; border: 1px solid #c7d1cb; border-radius: 5px; background: #fff; color: var(--mc-green); font-size: 10px; font-weight: 700; }
.mc-filterbar button.active { background: var(--mc-green); color: #fff; }
.mc-filter-note { align-self: center; margin-left: 3px; color: var(--mc-muted); font-size: 9px; }

.mc-section { scroll-margin-top: 176px; padding: 12px 18px 0; }
.mc-section:last-child { padding-bottom: 24px; }
.mc-tour-focus-layer { z-index: 81; }
.mc-tour-focus { position: relative; z-index: 82; border: 1px solid rgba(40, 91, 69, .46); border-radius: 7px; background: #fff; box-shadow: 0 18px 48px rgba(15, 23, 42, .28), 0 0 0 3px rgba(255, 255, 255, .72); }
.mc-section-title { min-height: 27px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.mc-section-title h3 { margin: 0; font-size: 16px; }
.mc-account { display: flex; align-items: center; gap: 6px; color: var(--mc-copy); font-size: 10px; }
.mc-account b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #cbd5cf; border-radius: 50%; color: var(--mc-green); font-size: 8px; }
.mc-panel { margin-bottom: 8px; padding: 11px; border: 1px solid var(--mc-line); border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .035); }
.mc-panel-head { min-height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mc-panel-head h4 { margin: 0; font-size: 13px; }
.mc-panel-head span { color: var(--mc-muted); font-size: 9px; }
.mc-subhead { margin-top: 15px; padding-top: 11px; border-top: 1px solid var(--mc-line); }

.mc-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 7px; margin: 6px 0 10px; }
.mc-metric { min-height: 58px; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; border: 1px solid #e0e6e2; border-radius: 6px; background: #f8faf9; }
.mc-metric strong { font-size: 20px; line-height: 1; letter-spacing: -.02em; }
.mc-metric span { margin-top: 5px; color: var(--mc-muted); font-size: 9px; }
.mc-metric-facebook-0, .mc-metric-youtube-0 { background: #eef1ff; border-color: #d9deff; }
.mc-metric-facebook-1 { background: #edf8f1; border-color: #d7eadf; }
.mc-metric-facebook-2, .mc-metric-instagram-2 { background: #f8eff7; border-color: #eadbea; }
.mc-metric-facebook-3, .mc-metric-youtube-3 { background: #fff6df; border-color: #f2e4ba; }
.mc-metric-instagram-0 { background: #fff0f5; border-color: #f4dbe5; }
.mc-metric-youtube-1 { background: #eef8f4; border-color: #d9ece4; }
.mc-metric-google-0 { background: #eef5ff; border-color: #dae7fb; }
.mc-metric-web-0 { background: #eef1ff; border-color: #d9deff; }
.mc-metric-web-1 { background: #edf8f1; border-color: #d7eadf; }
.mc-metric-web-2 { background: #fff0f5; border-color: #f4dbe5; }
.mc-metric-web-3 { background: #fff6df; border-color: #f2e4ba; }
.mc-layer-metric { appearance: none; position: relative; width: 100%; color: var(--mc-ink); text-align: left; transition: opacity .14s ease, background-color .14s ease, border-color .14s ease; }
.mc-layer-metric:before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 6px 6px 0 0; background: var(--metric-color); }
.mc-layer-metric[aria-pressed="true"] { border-color: color-mix(in srgb, var(--metric-color) 48%, #d9e1dc); background: color-mix(in srgb, var(--metric-color) 17%, #fff); box-shadow: 0 2px 6px rgba(15, 23, 42, .08); }
.mc-layer-metric[aria-pressed="false"] { opacity: .34; filter: saturate(.45); background: #f5f7f6; }
.mc-layer-metric:hover { opacity: .82; }
.mc-layer-metric:focus-visible { outline: 2px solid var(--mc-green); outline-offset: 2px; }

.mc-chart { height: 150px; padding-top: 0; }
.mc-chart svg { width: 100%; height: 124px; overflow: hidden; }
.mc-gridline { stroke: #e6ebe8; stroke-width: 1; }
.mc-line { fill: none; stroke: #7788ff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mc-chart-axis { display: flex; justify-content: space-between; color: var(--mc-muted); font-size: 9px; }
.mc-layer-chart { position: relative; height: 206px; }
.mc-layer-chart svg { height: 142px; }
.mc-layer-chart svg text { fill: var(--mc-muted); font-family: inherit; font-size: 9px; }
.mc-layer-line { fill: none; stroke: var(--series-color); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mc-chart-crosshair { display: none; stroke: #8b9891; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.mc-layer-chart [data-tooltip-dot] { fill: var(--series-color); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mc-layer-chart [data-chart-hit-area] { cursor: crosshair; pointer-events: all; }
.mc-layer-x-axis { position: relative; height: 32px; color: var(--mc-muted); font-size: 8px; }
.mc-layer-x-axis span { position: absolute; top: 3px; width: max-content; transform: translateX(-50%); white-space: nowrap; }
.mc-chart-tooltip { position: absolute; top: 26px; z-index: 3; min-width: 150px; padding: 8px 9px; transform: translateX(8px); border: 1px solid #d8dfdb; border-radius: 6px; background: rgba(255, 255, 255, .98); box-shadow: 0 6px 18px rgba(15, 23, 42, .14); pointer-events: none; }
.mc-chart-tooltip.align-right { transform: translateX(calc(-100% - 8px)); }
.mc-chart-tooltip[hidden] { display: none; }
.mc-chart-tooltip time { display: block; margin-bottom: 6px; color: var(--mc-ink); font-size: 9px; font-weight: 800; }
.mc-chart-tooltip span { grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-top: 4px; color: var(--mc-copy); font-size: 9px; }
.mc-chart-tooltip i { width: 7px; height: 7px; border-radius: 50%; background: var(--series-color); }
.mc-chart-tooltip b { font-weight: 500; }
.mc-chart-tooltip strong { color: var(--mc-ink); font-size: 9px; }
.mc-chart-legend { min-height: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 1px 2px 3px; color: var(--mc-muted); font-size: 9px; }
.mc-chart-legend span { align-items: center; gap: 5px; }
.mc-chart-legend span:before { content: ""; width: 14px; height: 2px; background: var(--series-color); }
.mc-bar-chart { height: 132px; display: flex; align-items: flex-end; gap: 3px; padding: 8px 6px 0; border: 1px solid #edf1ee; border-top: 0; background: #fff; }
.mc-bar-chart span { flex: 1; min-width: 2px; background: #f1ad2b; border-radius: 2px 2px 0 0; }

.mc-table-tools { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 8px 0; }
.mc-table-tools > div { display: flex; gap: 5px; }
.mc-search { min-width: 210px; display: grid; gap: 3px; color: var(--mc-muted); font-size: 9px; font-weight: 700; }
.mc-search input { height: 31px; padding: 5px 8px; border: 1px solid #c7d1cb; border-radius: 5px; }
.mc-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: visible; border: 1px solid var(--mc-line); border-radius: 5px; }
.mc-dashboard table { width: 100%; border-collapse: collapse; min-width: 720px; }
.mc-dashboard th, .mc-dashboard td { padding: 7px 8px; border-bottom: 1px solid #e4e9e6; text-align: left; vertical-align: middle; }
.mc-dashboard th { position: sticky; top: 0; background: #f5f7f6; color: var(--mc-muted); font-size: 9px; font-weight: 800; white-space: nowrap; }
.mc-dashboard th[data-sort-key] { cursor: pointer; }
.mc-dashboard td { color: var(--mc-copy); font-size: 10px; }
.mc-dashboard tbody tr:last-child td { border-bottom: 0; }
.mc-dashboard tbody tr:hover td { background: #fafcfb; }
.mc-dashboard tbody tr[data-record] { cursor: pointer; }
.mc-dashboard tbody tr[data-record]:focus-visible { outline: 2px solid var(--mc-green); outline-offset: -2px; }
.mc-content { min-width: 270px; max-width: 520px; display: flex; align-items: center; gap: 8px; }
.mc-content img, .mc-person img { width: 34px; height: 34px; flex: none; border-radius: 5px; background: #eef1ef; object-fit: cover; }
.mc-record-preview-empty { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border: 1px solid #d7dfdb; border-radius: 5px; background: #eef3f1; color: var(--mc-green); font-size: 9px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.mc-content span, .mc-copy { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mc-person { display: flex; align-items: center; gap: 7px; min-width: 150px; }
.mc-person img { border-radius: 50%; }
.mc-type { padding: 2px 6px; border: 1px solid #d5ded8; border-radius: 999px; background: #f6f8f7; font-size: 9px; white-space: nowrap; }
.mc-table-footer { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 2px 0; color: var(--mc-muted); font-size: 9px; }
.mc-page-controls { display: flex; align-items: center; gap: 7px; }
.mc-page-controls button { min-width: 60px; height: 27px; padding: 4px 8px; border: 1px solid #c7d1cb; border-radius: 5px; background: #fff; color: var(--mc-green); font-size: 9px; font-weight: 700; }
.mc-page-controls button:disabled { cursor: default; opacity: .45; }
.mc-unavailable { min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed #c9d3cd; border-radius: 6px; background: #fafbfa; color: var(--mc-muted); }
.mc-unavailable span { width: 21px; height: 21px; display: grid; place-items: center; flex: none; border: 1px solid #bdc8c1; border-radius: 50%; font-weight: 800; }
.mc-unavailable p { margin: 0; font-size: 10px; }
.mc-demo-grid, .mc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mc-demo-grid > div { padding: 10px; border: 1px solid var(--mc-line); border-radius: 6px; background: #fff; }
.mc-demo-grid h4 { margin: 0 0 7px; font-size: 11px; }
.mc-demo-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 2px; border-bottom: 1px solid #edf1ee; color: var(--mc-copy); font-size: 10px; }
.mc-demo-row:last-child { border-bottom: 0; }
.mc-demographic-panel { padding: 0; overflow: hidden; }
.mc-instagram-demographics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-instagram-demographics > * { min-width: 0; max-width: 100%; }
.mc-demo-block { min-width: 0; min-height: 210px; overflow: hidden; padding: 16px; border-right: 1px solid var(--mc-line); border-bottom: 1px solid var(--mc-line); background: #fff; }
.mc-demo-block:nth-child(2n) { border-right: 0; }
.mc-demo-block:nth-last-child(-n+2) { border-bottom: 0; }
.mc-demo-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mc-demo-block-head h4 { margin: 0; font-size: 14px; font-weight: 650; }
.mc-demo-block-head span { color: var(--mc-copy); font-size: 9px; }
.mc-gender-layout { min-height: 146px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 38px); }
.mc-gender-donut { width: 124px; height: 124px; flex: none; border-radius: 50%; background: conic-gradient(#8293f2 0 var(--female), #91cba4 var(--female) var(--male), #efa1dc var(--male) 360deg); position: relative; }
.mc-gender-donut:after { content: ""; position: absolute; inset: 23px; border-radius: 50%; background: #fff; }
.mc-demo-legend { min-width: 120px; display: grid; gap: 9px; }
.mc-demo-legend span { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; color: var(--mc-copy); font-size: 11px; }
.mc-demo-legend i { width: 11px; height: 11px; border-radius: 3px; }
.mc-demo-legend i.female { background: #8293f2; }
.mc-demo-legend i.male { background: #91cba4; }
.mc-demo-legend i.unknown { background: #efa1dc; }
.mc-demo-legend b { color: var(--mc-ink); font-size: 10px; }
.mc-age-chart { width: 100%; height: 146px; display: flex; align-items: end; gap: 6px; padding: 8px 2px 24px; border-bottom: 1px solid #d9dfdc; }
.mc-age-column { height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; position: relative; }
.mc-age-column b { margin-bottom: 4px; color: var(--mc-muted); font-size: 8px; font-weight: 600; }
.mc-age-column > span { width: min(22px, 70%); min-height: 3px; border-radius: 4px 4px 0 0; background: #8293f2; }
.mc-age-column em { position: absolute; top: calc(100% + 8px); color: var(--mc-muted); font-size: 8px; font-style: normal; white-space: nowrap; }
.mc-demo-table { border-top: 1px solid #edf1ee; }
.mc-demo-table .mc-demo-row { padding: 9px 2px; }
@media (max-width: 1050px) {
  .mc-shell { grid-template-columns: 150px minmax(0, 1fr); }
  .mc-sidebar nav i, .mc-sidebar-tools button:not(:first-child) { display: none; }
  .mc-sidebar nav button { grid-template-columns: 22px minmax(0, 1fr); }
  .mc-sidebar-tools button { justify-content: center; }
}
@media (max-width: 720px) {
  .mc-shell { grid-template-columns: 1fr; }
  .mc-sidebar { position: sticky; top: 0; display: flex; border-right: 0; border-bottom: 1px solid var(--mc-line); overflow-x: auto; }
  .mc-sidebar-tools { display: none; }
  .mc-sidebar nav { display: flex; }
  .mc-sidebar nav button { width: auto; min-width: max-content; flex: none; grid-template-columns: 22px auto; }
  .mc-main { min-width: 0; }
  .mc-platform-title, .mc-filterbar { padding-left: 10px; padding-right: 10px; }
  .mc-cutoff { display: none; }
  .mc-section { padding-left: 10px; padding-right: 10px; }
  .mc-filterbar { flex-wrap: wrap; }
  .mc-demo-grid, .mc-split, .mc-instagram-demographics { grid-template-columns: 1fr; }
  .mc-demo-block { border-right: 0; }
  .mc-demo-block:nth-last-child(-n+2) { border-bottom: 1px solid var(--mc-line); }
  .mc-demo-block:last-child { border-bottom: 0; }
}