/* Conversion workspace: MeoVideoAI violet journey, readable light surfaces. */
#analyticsDashboard {
  --a-ink: #172033;
  --a-muted: #59677d;
  --a-line: #e3e8f2;
  --a-purple: #5546f5;
  --a-green: #087d66;
  --a-surface: #f6f8fc;
  display: grid; gap: 22px; min-width: 0; margin-bottom: 36px;
  color: var(--a-ink); font: 400 14px/1.55 var(--sans, "Segoe UI", sans-serif);
}
#analyticsDashboard * { box-sizing: border-box; }
#analyticsDashboard h1, #analyticsDashboard h2, #analyticsDashboard h3, #analyticsDashboard strong { color: var(--a-ink); }
#analyticsDashboard p { color: var(--a-muted); }
#analyticsDashboard h1 { margin: 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.18; letter-spacing: -.045em; }
#analyticsDashboard h2 { margin: 0; font-size: 18px; line-height: 1.35; letter-spacing: -.025em; }
#analyticsDashboard h3 { margin: 0; font-size: 15px; }
#analyticsDashboard .analytics-eyebrow { margin: 0 0 8px; color: #5045ba; font-size: 11px; font-weight: 750; letter-spacing: .1em; }
#analyticsDashboard .analytics-heading { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
#analyticsDashboard .analytics-heading p:last-child { margin: 9px 0 0; }
#analyticsDashboard button { font: inherit; cursor: pointer; }
#analyticsDashboard button:disabled { cursor: wait; opacity: .6; }
#analyticsDashboard .analytics-button { display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 9px 15px; border: 1px solid #d8ddeb; border-radius: 10px; background: #fff; color: #3b329c; font-size: 13px; font-weight: 650; box-shadow: none; }
#analyticsDashboard .analytics-button:hover { border-color: #b9b1f8; background: #f6f4ff; }
#analyticsDashboard .analytics-button-primary { background: var(--a-purple); border-color: var(--a-purple); color: #fff; }
#analyticsDashboard .analytics-period { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--a-line); border-radius: 16px; background: #fff; }
#analyticsDashboard .analytics-presets { display: flex; flex-wrap: wrap; gap: 7px; }
#analyticsDashboard .analytics-presets button { min-height: 40px; padding: 8px 13px; border: 1px solid var(--a-line); border-radius: 9px; color: #42516a; background: #fff; font-size: 12px; font-weight: 650; }
#analyticsDashboard .analytics-presets button[aria-pressed="true"] { color: #fff; background: var(--a-purple); border-color: var(--a-purple); box-shadow: 0 4px 12px #5546f529; }
#analyticsDashboard .analytics-range-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
#analyticsDashboard label { display: grid; gap: 6px; color: #344054; font-size: 13px; font-weight: 650; }
#analyticsDashboard input { min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid #d8ddeb; background: #fff; border-radius: 8px; color: var(--a-ink); font: inherit; }
#analyticsDashboard input[type="date"] { width: 165px; }
#analyticsDashboard .analytics-range-caption { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 12px; }
#analyticsDashboard .analytics-range-caption strong { color: #5045ba; }
#analyticsDashboard .analytics-status { margin: -11px 0 -9px; min-height: 19px; font-size: 12px; }
#analyticsDashboard .analytics-error { margin: 0; padding: 14px 16px; border: 1px solid #f2c2c2; border-radius: 12px; background: #fff5f5; color: #a12a2a; }
#analyticsDashboard #analyticsReport { display: grid; gap: 22px; min-width: 0; }
#analyticsDashboard #analyticsReport[aria-busy="true"] { opacity: .65; }
#analyticsDashboard .analytics-coverage { border: 1px solid #dbe4fa; background: #eff4ff; border-radius: 12px; padding: 13px 16px; }
#analyticsDashboard .analytics-coverage strong { color: #334b8c; font-size: 13px; }
#analyticsDashboard .analytics-coverage p { margin: 4px 0 0; color: #465b83; font-size: 12px; }
#analyticsDashboard .analytics-coverage small { display: block; margin-top: 5px; color: #465b83; font-size: 12px; }
#analyticsDashboard .analytics-coverage details { margin-top: 8px; }
#analyticsDashboard .analytics-coverage summary { color: #3d5082; font-size: 12px; }
#analyticsDashboard .analytics-coverage ul { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 18px; color: #465b83; font-size: 12px; }
#analyticsDashboard .analytics-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#analyticsDashboard .analytics-metric { display: flex; min-width: 0; flex-direction: column; padding: 18px; border: 1px solid var(--a-line); border-radius: 14px; background: #fff; }
#analyticsDashboard .analytics-metric-label { color: #53627a; font-size: 12px; font-weight: 600; }
#analyticsDashboard .analytics-metric strong { margin-top: 11px; font-size: clamp(21px, 2vw, 28px); font-weight: 750; line-height: 1.2; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#analyticsDashboard .analytics-metric small { margin-top: 7px; color: var(--a-muted); font-size: 11px; line-height: 1.5; }
#analyticsDashboard .analytics-metric.is-revenue { border-color: #cfe7dd; background: #f3fbf7; }
#analyticsDashboard .analytics-metric.is-revenue strong { color: #087153; }
#analyticsDashboard .analytics-metric.is-conversion { border-color: #ddd8fb; background: #f7f5ff; }
#analyticsDashboard .analytics-metric.is-conversion strong { color: #4d3fce; }
#analyticsDashboard .analytics-card { min-width: 0; padding: 22px; border: 1px solid var(--a-line); border-radius: 16px; background: #fff; }
#analyticsDashboard .analytics-card-heading { display: flex; gap: 18px; align-items: start; justify-content: space-between; margin-bottom: 18px; }
#analyticsDashboard .analytics-card-heading p:not(.analytics-eyebrow) { margin: 6px 0 0; font-size: 12px; }
#analyticsDashboard .analytics-badge { flex-shrink: 0; padding: 6px 10px; border-radius: 8px; background: #eeebff; color: #4d3fce; font-size: 12px; font-weight: 750; }
#analyticsDashboard .analytics-journey { background: linear-gradient(115deg, #fff 70%, #f6f4ff); }
#analyticsDashboard .analytics-funnel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; counter-reset: journey; }
#analyticsDashboard .analytics-funnel li { position: relative; min-width: 0; padding: 16px 13px 13px; border: 1px solid #e0e2f1; border-radius: 12px; background: #fff; counter-increment: journey; }
#analyticsDashboard .analytics-funnel li:not(:last-child)::after { content: "›"; position: absolute; right: -9px; top: 44%; z-index: 1; background: #f8f7fe; color: #8b81c0; font-size: 20px; line-height: 18px; }
#analyticsDashboard .analytics-step-name { display: block; min-height: 38px; padding-right: 16px; color: #485672; font-size: 12px; }
#analyticsDashboard .analytics-step-name::after { content: counter(journey, decimal-leading-zero); position: absolute; right: 10px; top: 16px; color: #8992ac; font: 11px/1.4 var(--mono, monospace); }
#analyticsDashboard .analytics-funnel strong { display: block; margin: 8px 0 13px; font-size: 26px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#analyticsDashboard .analytics-funnel progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 3px; overflow: hidden; accent-color: var(--a-purple); background: #eceef6; }
#analyticsDashboard progress::-webkit-progress-bar { background: #eceef6; border-radius: 3px; }
#analyticsDashboard progress::-webkit-progress-value { background: var(--a-purple); border-radius: 3px; }
#analyticsDashboard progress::-moz-progress-bar { background: var(--a-purple); }
#analyticsDashboard .analytics-funnel small { display: block; margin-top: 8px; color: #647189; font-size: 11px; }
#analyticsDashboard .analytics-funnel li:last-child { border-color: #c9e7db; background: #f5fcf8; }
#analyticsDashboard .analytics-funnel li:last-child strong { color: #087d66; }
#analyticsDashboard .analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; min-width: 0; }
#analyticsDashboard .analytics-grid-main { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
#analyticsDashboard .analytics-grid-performance { grid-template-columns: minmax(0, 1fr); }
#analyticsDashboard .analytics-daily-chart { min-height: 190px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
#analyticsDashboard .analytics-daily-chart svg { display: block; min-width: 620px; width: 100%; height: auto; overflow: visible; }
#analyticsDashboard .analytics-daily-chart svg text { fill: #647189; font: 14px var(--sans, sans-serif); }
#analyticsDashboard .analytics-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; color: #59677d; font-size: 12px; }
#analyticsDashboard .analytics-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
#analyticsDashboard .analytics-chart-legend i { width: 15px; height: 3px; background: var(--a-purple); border-radius: 2px; }
#analyticsDashboard .analytics-chart-legend .analytics-dot-pageviews { background: #17a9a5; }
#analyticsDashboard .analytics-details { margin-top: 18px; border-top: 1px solid var(--a-line); padding-top: 10px; }
#analyticsDashboard summary { cursor: pointer; color: #3f4c65; font-size: 13px; font-weight: 650; }
#analyticsDashboard .analytics-details summary { padding: 8px 0; }
#analyticsDashboard .analytics-table-wrap { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; border-radius: 8px; }
#analyticsDashboard table { width: 100%; border-collapse: collapse; color: #344054; font-size: 12px; }
#analyticsDashboard th { padding: 10px 12px; border-bottom: 1px solid #dfe5ef; background: #f8f9fd; color: #5b6880; font-size: 11px; font-weight: 700; text-align: right; white-space: nowrap; }
#analyticsDashboard td { padding: 12px; border-bottom: 1px solid #edf0f6; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#analyticsDashboard th:first-child, #analyticsDashboard td:first-child { text-align: left; }
#analyticsDashboard td:first-child { max-width: 230px; min-width: 100px; white-space: normal; overflow-wrap: anywhere; }
#analyticsDashboard tr:last-child td { border-bottom: 0; }
#analyticsDashboard td small { display: block; margin-top: 3px; color: #647189; font-size: 11px; }
#analyticsDashboard .analytics-packages { display: grid; gap: 14px; }
#analyticsDashboard .analytics-package { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--a-line); }
#analyticsDashboard .analytics-package:last-child { border-bottom: 0; padding-bottom: 0; }
#analyticsDashboard .analytics-rank { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #f0edff; color: #5145c6; font: 700 12px var(--mono, monospace); }
#analyticsDashboard .analytics-package h3 { font-size: 14px; overflow-wrap: anywhere; }
#analyticsDashboard .analytics-package p { margin: 4px 0 0; font-size: 11px; }
#analyticsDashboard .analytics-package-value { text-align: right; }
#analyticsDashboard .analytics-package-value strong { font-size: 13px; color: #087d66; }
#analyticsDashboard .analytics-package-value small { display: block; font-size: 11px; color: #647189; }
#analyticsDashboard .analytics-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#analyticsDashboard .analytics-insight { padding: 16px; border: 1px solid #e6e4f6; border-left: 3px solid #9488ee; border-radius: 10px; background: #faf9ff; }
#analyticsDashboard .analytics-insight p { margin: 8px 0; font-size: 13px; }
#analyticsDashboard .analytics-insight small { display: block; color: #68718a; font-size: 11px; }
#analyticsDashboard .analytics-insight.is-warning { border-color: #f0dfc0; border-left-color: #d19a3a; background: #fffaf1; }
#analyticsDashboard .analytics-empty { display: grid; min-height: 96px; align-content: center; padding: 18px; border: 1px dashed #d8deeb; border-radius: 10px; color: #68758a; font-size: 13px; }
#analyticsDashboard .analytics-empty strong { margin-bottom: 5px; font-size: 14px; }
#analyticsDashboard .analytics-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; list-style: none; }
#analyticsDashboard .analytics-settings > summary::-webkit-details-marker { display: none; }
#analyticsDashboard .analytics-settings > summary strong { display: block; font-size: 17px; }
#analyticsDashboard .analytics-settings > summary small { display: block; margin-top: 4px; color: #647189; font-size: 12px; font-weight: 400; }
#analyticsDashboard .analytics-settings-toggle { color: #6155cd; font-size: 24px; font-weight: 400; }
#analyticsDashboard .analytics-settings[open] .analytics-settings-toggle { transform: rotate(45deg); }
#analyticsDashboard .analytics-settings form { display: grid; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--a-line); }
#analyticsDashboard .analytics-settings form > p { margin: 0; font-size: 13px; }
#analyticsDashboard .analytics-switch { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #e3defb; border-radius: 10px; background: #f8f6ff; }
#analyticsDashboard .analytics-switch input { width: 19px; min-height: 19px; height: 19px; margin: 0; accent-color: var(--a-purple); }
#analyticsDashboard .analytics-switch small { display: block; margin-top: 3px; color: #65708a; font-size: 12px; font-weight: 400; }
#analyticsDashboard .analytics-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#analyticsDashboard .analytics-settings-grid label { align-content: start; }
#analyticsDashboard .analytics-settings-grid small { color: #647189; font-size: 11px; font-weight: 400; }
#analyticsDashboard .analytics-settings-grid a { color: #4d42c0; text-decoration: underline; text-underline-offset: 3px; }
#analyticsDashboard .analytics-tag-warning { padding: 13px 15px; border: 1px solid #eddaa6; border-radius: 10px; background: #fffaf0; color: #805923; }
#analyticsDashboard .analytics-tag-warning strong { color: #805923; }
#analyticsDashboard .analytics-tag-warning p { margin: 5px 0 0; color: #805923; font-size: 12px; }
#analyticsDashboard .analytics-settings-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
#analyticsDashboard .analytics-settings-actions span { color: #59677d; font-size: 12px; }
#analyticsDashboard .analytics-settings-actions .is-error { color: #ac2e2e; }
#analyticsDashboard .analytics-settings-actions .is-success { color: #087d66; }
#analyticsDashboard :focus-visible { outline: 3px solid #a398f9; outline-offset: 3px; }
@media (min-width: 1350px) { #analyticsDashboard .analytics-period { grid-template-columns: 1fr auto; align-items: end; } #analyticsDashboard .analytics-range-caption { grid-column: 1 / -1; } }
@media (max-width: 1250px) { #analyticsDashboard .analytics-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); } #analyticsDashboard .analytics-funnel li:nth-child(3)::after { display: none; } #analyticsDashboard .analytics-grid-main { grid-template-columns: minmax(0, 1fr); } #analyticsDashboard .analytics-grid { grid-template-columns: minmax(0, 1fr); } #analyticsDashboard .analytics-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { #analyticsDashboard { gap: 16px; } #analyticsDashboard #analyticsReport { gap: 16px; } #analyticsDashboard .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #analyticsDashboard .analytics-metric { padding: 15px; } #analyticsDashboard .analytics-card { padding: 18px; } #analyticsDashboard .analytics-settings-grid { grid-template-columns: minmax(0, 1fr); } #analyticsDashboard .analytics-insights { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { #analyticsDashboard .analytics-heading { align-items: start; } #analyticsDashboard .analytics-heading > .analytics-button { padding-inline: 11px; font-size: 12px; } #analyticsDashboard .analytics-heading > .analytics-button svg { display: none; } #analyticsDashboard .analytics-period { padding: 14px; } #analyticsDashboard .analytics-presets { gap: 6px; } #analyticsDashboard .analytics-presets button { flex: 1 0 calc(25% - 6px); padding: 8px 6px; font-size: 11px; } #analyticsDashboard .analytics-range-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #analyticsDashboard .analytics-range-form input { width: 100%; } #analyticsDashboard .analytics-range-form .analytics-button { grid-column: 1 / -1; } #analyticsDashboard .analytics-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } #analyticsDashboard .analytics-funnel li:nth-child(3)::after { display: block; } #analyticsDashboard .analytics-funnel li:nth-child(2n)::after { display: none; } #analyticsDashboard .analytics-card-heading { flex-wrap: wrap; gap: 10px; } #analyticsDashboard .analytics-card { padding: 15px; } #analyticsDashboard .analytics-metric strong { font-size: 23px; } #analyticsDashboard .analytics-metric.is-revenue strong { font-size: 20px; } #analyticsDashboard .analytics-package { grid-template-columns: 27px minmax(0, 1fr); } #analyticsDashboard .analytics-package-value { grid-column: 2; text-align: left; } #analyticsDashboard .analytics-range-caption { display: grid; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { #analyticsDashboard *, #analyticsDashboard *::before, #analyticsDashboard *::after { animation: none !important; transition: none !important; } }

/* Public consent stays compact and leaves the page usable. */
.measurement-consent { position: fixed; z-index: 900; left: 24px; bottom: 24px; width: min(560px, calc(100vw - 48px)); max-height: min(70vh, 520px); overflow: auto; padding: 22px; border: 1px solid #dcd9f5; border-radius: 16px; background: #fff; color: #172033; box-shadow: 0 16px 60px #28214b24; font: 400 14px/1.55 var(--sans, "Segoe UI", sans-serif); }
.measurement-consent strong, .measurement-consent h2, .measurement-consent h3 { color: #172033; font-size: 17px; }
.measurement-consent p { margin: 9px 0 15px; color: #59677d; font-size: 13px; }
.measurement-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.measurement-consent-actions button { display: inline-flex; align-items: center; justify-content: center; flex: 1; min-height: 44px; padding: 10px 16px; border: 1px solid #cfc8f6; border-radius: 10px; background: #fff; color: #473bba; font: 650 13px var(--sans, "Segoe UI", sans-serif); cursor: pointer; box-shadow: none; }
.measurement-consent-actions button:last-child { border-color: #cfc8f6; background: #fff; color: #473bba; }
.measurement-consent-actions button:hover { outline: 2px solid #d5cffb; outline-offset: 1px; }
.measurement-preferences { position: static; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 10px 12px; border: 1px solid #dcd9ed; border-radius: 9px; background: #fff; color: #5a4eae; font: 600 12px/1.4 var(--sans, "Segoe UI", sans-serif); text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.measurement-preferences[hidden] { display: none; }
.footer-privacy { width: min(1180px, calc(100% - 48px)); margin: 0 auto 20px; }
/* Reserve real layout space: privacy controls must never cover account details. */
.portal-app-sidebar { height: 100vh; height: 100dvh; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.portal-app-sidebar > .brand, .portal-app-sidebar > .sidebar-profile { flex-shrink: 0; }
.portal-app-sidebar > nav { min-height: 0; }
.sidebar-privacy { flex-shrink: 0; margin-top: auto; padding: 16px 8px 12px; }
.sidebar-privacy .measurement-preferences { width: 100%; }
.sidebar-privacy + .sidebar-profile { margin-top: 0; }
/* An open consent panel also leaves the account row and language controls clear. */
.portal-page .measurement-consent { left: auto; right: 24px; bottom: 88px; max-height: min(70vh, calc(100dvh - 176px), 520px); }
.measurement-consent :focus-visible, .measurement-preferences:focus-visible { outline: 3px solid #a398f9; outline-offset: 3px; }
@media (max-width: 680px) { .measurement-consent { left: 12px; bottom: calc(85px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); padding: 18px; max-height: min(65vh, calc(100dvh - 172px), 480px); } .measurement-consent-actions button { padding-inline: 10px; } .footer-privacy { width: calc(100% - 32px); } }
@media (max-width: 900px) { .portal-page .measurement-consent { left: 12px; right: 12px; bottom: calc(148px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); max-height: min(65vh, calc(100dvh - 224px), 480px); } }