/* Shared PHP experience layer: local assets, no additional UI framework. */
:root {
  --ux-surface: #102019;
  --ux-canvas: #08140f;
  --ux-ink: #eff8f2;
  --ux-muted: #b0c2b7;
  --ux-border: #344b3e;
  --ux-accent: #52e58b;
  --ux-soft: #183e2a;
  --ux-shadow: 0 4px 20px rgb(0 0 0 / .12);
}
html[data-ui-framework="bootstrap"] {
  --ux-surface: #fff;
  --ux-canvas: #f3f6f5;
  --ux-ink: #172b23;
  --ux-muted: #52645b;
  --ux-border: #d8e2dc;
  --ux-accent: #127346;
  --ux-soft: #e8f4ed;
  --ux-shadow: 0 3px 16px rgb(25 54 39 / .045);
}
html { scroll-padding-top: 100px; }
html body { line-height: 1.55; }
html body :focus-visible { outline: 3px solid var(--ux-accent); outline-offset: 4px; }
html body .bb-icon { display: inline-block; flex: 0 0 24px; vertical-align: middle; }
html body.bb-app-page .bb-workspace { background: var(--ux-canvas); color: var(--ux-ink); }
html[data-ui-framework] body.bb-app-page .bb-workspace-main { min-width: 0; background: var(--ux-canvas); }
html body.bb-app-page .bb-workspace-canvas { width: 100%; max-width: 1760px; margin-inline: auto; padding: clamp(20px, 3vw, 44px); }
html body.bb-app-page .bb-sidebar { background: var(--ux-surface); border-right: 1px solid var(--ux-border); box-shadow: none; }
html body.bb-app-page .bb-sidebar .brand-copy small { font-size: 11px; letter-spacing: .025em; color: var(--ux-muted); }
html body.bb-app-page .main-nav { gap: 5px; }
html body.bb-app-page .main-nav a { min-height: 44px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ux-muted); }
html body.bb-app-page .main-nav a:hover { background: var(--ux-soft); color: var(--ux-accent); }
html body.bb-app-page .main-nav a.is-active { background: var(--ux-soft); color: var(--ux-accent); box-shadow: inset 3px 0 var(--ux-accent); }
html body.bb-app-page .main-nav .nav-priority { background: var(--ux-accent); color: var(--ux-surface); }
html body.bb-app-page .nav-glyph { width: 26px; height: 26px; background: none; border: 0; color: inherit; }
html body.bb-app-page .nav-group summary { min-height: 44px; padding: 12px; color: var(--ux-muted); font-size: 12px; }
html body.bb-app-page .sidebar-footer { color: var(--ux-muted); font-size: 12px; border-top: 1px solid var(--ux-border); }
html body.bb-app-page .sidebar-footer small { color: var(--ux-muted); }
html body.bb-app-page .bb-topbar { background: var(--ux-surface); border-bottom: 1px solid var(--ux-border); box-shadow: none; padding-inline: clamp(20px, 3vw, 44px); min-height: 76px; }
html body.bb-app-page .topbar-context span { color: var(--ux-muted); font-size: 12px; }
html body.bb-app-page .topbar-context strong { color: var(--ux-ink); font-size: 16px; }
html body .page-heading { gap: 20px; margin-bottom: 26px; }
html body .page-heading h1 { max-width: 25ch; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: -.04em; margin: 7px 0 12px; }
html body .page-heading p { max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--ux-muted); }
html body .eyebrow { font-size: 11px; letter-spacing: .12em; line-height: 1.5; }
html body.bb-app-page :is(.panel, .metric-card, .timeline-card, .news-section, .football-summary) { background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 18px; box-shadow: var(--ux-shadow); }
html body.bb-app-page :is(.panel, .metric-card, .timeline-card)::after { display: none; }
html body.bb-app-page .panel-header h2, html body.bb-app-page .football-summary-heading h2 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.025em; }
/* Native list/definition margins survive both additive CSS frameworks. */
html body .sync-flow-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body .sync-flow-list > li { min-width: 0; list-style: none; overflow-wrap: anywhere; }
html body .sync-metrics { margin-inline: 0; padding: 0; }
html body .sync-metrics > div { min-width: 0; }
html body .sync-metrics :is(dt, dd) { margin-inline: 0; overflow-wrap: anywhere; line-height: 1.5; }
html body .sync-run-workflow .panel-header { flex-wrap: wrap; }
html body .sync-run-workflow .panel-header > * { min-width: 0; }
html body .sync-run-workflow .sync-state { display: inline-block; max-width: 100%; white-space: normal; line-height: 1.5; }
html body .mini-stats { flex-wrap: wrap; min-width: 0; }
html body .mini-stats > span { max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  html body .sync-flow-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html body .dashboard-agenda-grid { display: block; margin: 0 0 24px; }
html body .dashboard-agenda-grid .panel { padding: clamp(18px, 2.4vw, 28px); }
html body .dashboard-agenda-grid .match-row { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ux-ink); border: 1px solid var(--ux-border); border-radius: 12px; padding: 16px; background: var(--ux-surface); }
html body .dashboard-agenda-grid .match-row:hover { border-color: var(--ux-accent); background: var(--ux-soft); }
html body .dashboard-agenda-grid .date-block { background: var(--ux-soft); color: var(--ux-accent); border-radius: 10px; min-width: 58px; }
html body .dashboard-agenda-grid .match-main { flex: 1; min-width: 0; }
html body .dashboard-agenda-grid .match-main span { color: var(--ux-muted); font-size: 14px; }
html body .metric-grid { gap: 14px; margin: 0 0 28px; }
html body .metric-grid .metric-card { min-height: 130px; padding: 20px; }
html body .metric-grid .metric-card strong { font-size: 32px; margin-block: 4px; letter-spacing: -.04em; }
html body .metric-grid :is(.metric-label, small) { color: var(--ux-muted); font-size: 13px; }
html body .news-section { padding: 24px; }
html body .football-summary { padding: clamp(18px, 2.4vw, 28px); }
html body .football-summary .football-health-note { border-left: 3px solid #b77912; background: var(--ux-soft); border-radius: 8px; padding: 12px 16px; margin: 16px 0; }
html body .football-health-note :is(.football-data-warning, .football-provisional-note) { background: none; border: 0; padding: 0; margin: 4px 0; font-size: 13px; color: var(--ux-muted); }
html body .football-attribution, html body .football-provisional-note { font-size: 12px; line-height: 1.65; color: var(--ux-muted); }
html[data-ui-framework] body .football-summary .football-empty { min-height: 96px; padding-block: 24px; }
html[data-ui-framework] body .news-empty { min-height: 130px; }
html[data-ui-framework] body .news-empty p { color: var(--ux-muted); }
html body.public-shell .public-footer a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; }
html body .auth-password { display: grid; gap: 8px; }
html body :is(.button, button[type="submit"], .news-controls button, .mobile-menu) { min-height: 44px; }
html body .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; max-width: 100%; border-radius: 10px; padding: 10px 17px; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; vertical-align: middle; white-space: normal; }
/* Actions own their spacing; individual links never offset an adjacent button. */
html body :is(.bb-action-row, .action-row, .phase5-actions, .public-actions) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; min-width: 0; }
html body :is(.bb-action-row, .action-row, .phase5-actions, .public-actions) > form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; min-width: 0; margin: 0; }
html body :is(.bb-action-row, .action-row, .phase5-actions, .public-actions) > .button,
html body :is(.bb-action-row, .action-row, .phase5-actions, .public-actions) > form > .button { margin: 0; }
html body :is(.bb-card-actions, .action-row, .phase5-actions, .public-actions) { margin-block: 16px; }
html body .bb-card-actions:not(:has(> *)) { display: none; }
html body :is(.group-heading-actions, .field-heading-actions, .marketplace-heading-actions, .onboarding-actions, .hero-actions, .group-invite-result-actions, .group-access-search-actions, .match-attendance-actions, .payment-actions) { align-items: stretch; }
html body .match-attendance-actions form, html body .payment-actions > form { display: flex; }
html body .match-attendance-actions .button { min-height: 44px; }
html body .button:hover { transform: none; }
html body .button::after { display: none; }
html body .button:disabled { opacity: .6; cursor: not-allowed; }
html body .stats-team { margin-block: 28px; }
html body .bb-workspace-canvas > .metric-card + .metric-card { margin-top: 16px; }
html body .stats-team .metric-card > details { margin-block: 14px; }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { border-radius: 10px; }
html body :is(.form-grid, .discovery-form, .auth-card) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 44px; font-size: 16px; }
html body .status-tabs { min-width: 0; width: 100%; gap: 6px; padding: 6px; border: 1px solid var(--ux-border); background: var(--ux-surface); border-radius: 13px; }
html body .status-tabs a { min-height: 44px; padding: 10px 14px; border-radius: 9px; }
html body .status-tabs > ul { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; padding: 0; margin: 0; list-style: none; width: 100%; }
html body .status-tabs > ul > li { display: flex; min-width: 0; }
html body .status-tabs > ul > li > a { width: 100%; margin: 0; }
html body .status-tabs a[aria-current="page"] { background: var(--ux-accent); border-color: var(--ux-accent); color: var(--ux-surface); }
html body :is(.timeline-card, .panel, .field-card, .group-card) { overflow-wrap: anywhere; }
html body [id^="match-"] { scroll-margin-top: 100px; }
html body .empty-state { padding: clamp(24px, 4vw, 48px); border: 1px dashed var(--ux-border); border-radius: 14px; background: var(--ux-surface); }
html body .empty-state p { color: var(--ux-muted); max-width: 60ch; margin-inline: auto; }
html body.public-shell { background: #f6f9f7; color: #172b23; }
html body.public-shell .public-header { background: rgb(255 255 255 / .97); border-bottom: 1px solid #d8e2dc; }
html body.public-shell :is(.public-hero h1, .discovery-hero h1) { font-size: clamp(34px, 4.5vw, 62px); line-height: 1.06; letter-spacing: -.045em; }
html body.public-shell .discovery-directory { max-width: 1200px; width: 100%; margin-inline: auto; padding: clamp(20px, 4vw, 48px) clamp(16px, 3vw, 32px); }
html body.public-shell .discovery-hero { padding: 0; margin: 0 0 28px; }
html body.public-shell .discovery-hero h1 { max-width: 20ch; }
html body.public-shell .discovery-hero p { max-width: 65ch; color: #52645b; }
html body.public-shell .discovery-form { background: #fff; color: #172b23; border: 1px solid #d8e2dc; box-shadow: var(--ux-shadow); border-radius: 18px; padding: clamp(18px, 3vw, 28px); }
html body.public-shell .discovery-form :is(label, .discovery-location-status) { color: #52645b; }
html body.public-shell .discovery-form .button-secondary { color: #127346; border-color: #127346; background: #fff; }
html body .password-field { position: relative; display: flex; align-items: stretch; width: 100%; }
html body .password-field input { width: 100%; min-width: 0; padding-inline-end: 80px; }
html body .password-toggle { position: absolute; inset: 2px 2px 2px auto; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ux-accent); font-size: 13px; font-weight: 700; cursor: pointer; }
@media (min-width: 2000px) {
  html body.bb-app-page .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
  html body.bb-app-page .timeline::before { display: none; }
  html body.bb-app-page .timeline-section-title { grid-column: 1 / -1; padding-left: 0; }
}
@media (max-width: 960px) {
  html body.bb-app-page .bb-workspace-canvas { padding: 24px 20px; }
  html body.bb-app-page .bb-sidebar { width: min(320px, 88vw); }
  html body.bb-app-page .bb-topbar { min-height: 68px; padding-inline: 20px; }
  html body .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 84px; }
  html body.bb-app-page .bb-workspace-canvas { padding: 22px 16px calc(110px + env(safe-area-inset-bottom)); }
  html body .page-heading { align-items: stretch; gap: 16px; }
  html body .page-heading h1 { font-size: clamp(27px, 7vw, 36px); }
  html body .group-heading-actions { width: 100%; }
  html body .group-heading-actions .button { flex: 1; }
  html body .metric-grid .metric-card { min-height: 112px; padding: 16px; }
  html body .metric-grid .metric-card strong { font-size: 28px; }
  html body .dashboard-agenda-grid .match-row { flex-wrap: wrap; gap: 12px; }
  html body .dashboard-agenda-grid .match-main { flex-basis: calc(100% - 80px); }
  html body .dashboard-agenda-grid .format-pill { margin-inline-start: 70px; }
  html body .news-section { padding: 18px; }
  html body.bb-app-page .bb-mobile-nav { gap: 2px; background: var(--ux-surface); border-top: 1px solid var(--ux-border); box-shadow: 0 -4px 18px rgb(0 0 0 / .04); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
  html body.bb-app-page .bb-mobile-nav a { min-width: 0; min-height: 52px; border-radius: 12px; color: var(--ux-muted); gap: 4px; }
  html body.bb-app-page .bb-mobile-nav a[aria-current="page"] { background: var(--ux-soft); color: var(--ux-accent); }
  html body.bb-app-page .bb-mobile-nav small { font-size: 10px; line-height: 1.2; white-space: normal; text-align: center; }
  html body .status-tabs { display: flex; flex-wrap: wrap; }
  html body .status-tabs > ul > li { flex: 1 1 auto; }
  html body.public-shell .discovery-directory { padding-top: 28px; }
  html body.guest-shell .login-visual { min-height: auto; padding: 24px 20px; }
  html body.guest-shell .login-visual :is(.login-copy, .pitch-card) { display: none; }
  html body.guest-shell .login-panel { padding: 28px 20px; }
}
@media (max-width: 520px) {
  html body :is(.bb-action-row, .action-row, .phase5-actions, .public-actions) > .button,
  html body :is(.bb-action-row, .action-row, .phase5-actions, .public-actions) > form { flex: 1 1 12rem; }
  html body :is(.bb-action-row, .action-row, .phase5-actions, .public-actions) > form > .button { flex: 1 1 auto; }
}
/* PHP analytics: bounded cards, comparable metrics and accessible native charts. */
html body .analytics-dashboard { display: grid; gap: 24px; min-width: 0; color: var(--ux-ink); --analytics-blue: #2768c4; }
html[data-ui-framework="tailwind"] body .analytics-dashboard { --analytics-blue: #91bcff; }
html body .analytics-dashboard :is(section, article, details, header, form) { min-width: 0; }
html body .analytics-dashboard [id] { scroll-margin-top: 100px; }
html body .analytics-dashboard :is(h1, h2, p) { margin: 0; }
html body .analytics-dashboard h1 { font-size: clamp(28px, 2.7vw, 42px); line-height: 1.15; letter-spacing: -.035em; margin-block: 6px 10px; }
html body .analytics-dashboard h2 { font-size: 19px; line-height: 1.35; letter-spacing: -.02em; }
html body .analytics-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
html body .analytics-heading p { color: var(--ux-muted); max-width: 65ch; font-size: 15px; line-height: 1.6; }
html body .analytics-scope { display: inline-block; color: var(--ux-accent); background: var(--ux-soft); border: 1px solid var(--ux-border); border-radius: 6px; font-size: 12px; font-weight: 700; padding: 5px 9px; margin-top: 12px; }
html body .analytics-period { display: flex; align-items: flex-end; flex: 0 0 auto; gap: 10px; margin: 0; }
html body .analytics-period label { display: grid; gap: 6px; margin: 0; font-size: 13px; color: var(--ux-muted); }
html body .analytics-period select { min-height: 44px; min-width: 190px; margin: 0; font-size: 15px; color: var(--ux-ink); background-color: var(--ux-surface); border: 1px solid var(--ux-border); padding: 8px 32px 8px 12px; }
html body .analytics-period .button { margin: 0; }
html body .analytics-jump { display: flex; flex-wrap: wrap; gap: 4px 20px; border-bottom: 1px solid var(--ux-border); }
html body .analytics-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--ux-muted); text-decoration: none; border-bottom: 2px solid transparent; }
html body .analytics-jump a:is(:hover, :focus-visible) { color: var(--ux-accent); border-bottom-color: var(--ux-accent); }
html body .analytics-period-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--ux-muted); }
html body .analytics-period-note > :first-child { font-weight: 650; color: var(--ux-ink); }
html body .analytics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
html body .analytics-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border: 1px solid var(--ux-border); border-radius: 14px; background: var(--ux-surface); box-shadow: 0 2px 6px rgb(0 0 0 / .025); }
html body .analytics-kpi > span { color: var(--ux-muted); font-size: 13px; font-weight: 600; min-height: 36px; line-height: 1.4; }
html body .analytics-kpi > strong { color: var(--ux-ink); font-size: clamp(28px, 2.7vw, 38px); letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
html body .analytics-kpi strong small { font-size: .55em; padding-left: 3px; }
html body .analytics-kpi > small { margin-top: auto; font-size: 12px; line-height: 1.5; color: var(--ux-muted); }
html body .analytics-change { font-weight: 650; }
html body .analytics-change span { font-weight: 400; }
html body .analytics-panel { background: var(--ux-surface); border: 1px solid var(--ux-border); border-radius: 16px; padding: 24px; }
html body .analytics-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
html body .analytics-panel-heading .eyebrow { margin-bottom: 5px; display: block; }
html body .analytics-caption { color: var(--ux-muted); font-size: 13px; line-height: 1.65; margin-top: 10px !important; max-width: 100ch; }
html body .analytics-main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); gap: 20px; align-items: start; }
html body .analytics-chip { font-size: 12px; color: var(--ux-accent); background: var(--ux-soft); padding: 7px 10px; border-radius: 7px; white-space: nowrap; }
html body .analytics-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 8px; font-size: 13px; color: var(--ux-muted); }
html body .analytics-chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
html body .analytics-chart-legend span::before { content: ''; height: 3px; width: 18px; background: var(--ux-accent); }
html body .analytics-chart-legend .analytics-legend-views::before { background: var(--analytics-blue); }
html body .analytics-chart-frame { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
html body .analytics-chart { display: block; width: 100%; height: 220px; overflow: visible; }
html body .analytics-y-labels { display: flex; flex-direction: column; justify-content: space-between; text-align: end; padding-block: 8px; font-size: 12px; color: var(--ux-muted); font-variant-numeric: tabular-nums; }
html body .analytics-date-labels { display: flex; justify-content: space-between; gap: 10px; margin-left: 46px; font-size: 12px; color: var(--ux-muted); }
html body .analytics-gridline { stroke: var(--ux-border); stroke-dasharray: 4 5; }
html body .analytics-area { fill: var(--analytics-blue); opacity: .09; }
html body .analytics-chart polyline { fill: none; stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
html body .analytics-line-views { stroke: var(--analytics-blue); }
html body .analytics-line-sessions { stroke: var(--ux-accent); stroke-dasharray: 7 4; }
html body .analytics-data-table { margin-top: 16px; border-top: 1px solid var(--ux-border); }
html body .analytics-dashboard summary { cursor: pointer; min-height: 44px; padding-block: 13px; font-weight: 650; font-size: 14px; color: var(--ux-accent); }
html body .analytics-dashboard summary::marker { color: var(--ux-accent); }
html body .analytics-data-table .data-table-wrap { max-height: 350px; overflow: auto; }
html body .analytics-ranks { list-style: none; padding: 0; margin: 18px 0 0; }
html body .analytics-ranks li { padding-block: 9px; }
html body .analytics-ranks li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
html body .analytics-ranks li > div > span { overflow-wrap: anywhere; color: var(--ux-ink); }
html body .analytics-ranks strong { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; font-weight: 650; }
html body .analytics-ranks small { font-size: 11px; font-weight: 400; color: var(--ux-muted); padding-left: 4px; }
html body .analytics-track { display: block; height: 4px; background: var(--ux-soft); border-radius: 3px; overflow: hidden; }
html body .analytics-track i { display: block; height: 100%; background: var(--ux-accent); border-radius: inherit; }
html body .analytics-no-data { padding-block: 24px; color: var(--ux-muted); font-size: 14px; }
html body .analytics-heat-scroll { max-width: 100%; overflow-x: auto; margin-top: 16px; }
html body .analytics-countries-overview > a { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 12px 0; font-size: 13px; color: var(--ux-accent); font-weight: 650; }
html body .analytics-country-scroll { max-width: 100%; overflow: auto; max-height: 460px; margin-top: 20px; }
html body .analytics-country-table { width: 100%; min-width: 600px; border-collapse: collapse; color: var(--ux-ink); font-size: 14px; }
html body .analytics-country-table :is(th, td) { padding: 13px 16px; border-bottom: 1px solid var(--ux-border); font-variant-numeric: tabular-nums; text-align: end; }
html body .analytics-country-table th:first-child { text-align: start; position: sticky; left: 0; background: var(--ux-surface); min-width: 140px; z-index: 1; }
html body .analytics-country-table thead th { color: var(--ux-muted); font-size: 12px; font-weight: 650; background: var(--ux-surface); position: sticky; top: 0; }
html body .analytics-country-table thead th:first-child { z-index: 2; }
html body .analytics-country-table tbody th { font-weight: 600; }
html body .analytics-country-table tbody tr:hover { background: var(--ux-soft); }
html body .analytics-scroll-hint { display: none; font-size: 12px; color: var(--ux-muted); margin-top: 10px !important; }
html body .analytics-heatmap { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 760px; table-layout: fixed; font-size: 11px; }
html body .analytics-heatmap th { color: var(--ux-muted); border: 0; padding: 4px 0; text-align: center; font-weight: 500; }
html body .analytics-heatmap th:first-child { width: 44px; text-align: start; }
html body .analytics-heatmap td { border: 0; height: 30px; padding: 2px 0; text-align: center; border-radius: 4px; font-variant-numeric: tabular-nums; }
html body .analytics-heatmap [data-level="0"] { background: var(--ux-canvas); color: var(--ux-muted); }
html body .analytics-heatmap [data-level="1"] { background: #d5f1df; color: #154b2c; }
html body .analytics-heatmap [data-level="2"] { background: #95d5ac; color: #123e24; }
html body .analytics-heatmap [data-level="3"] { background: #277a4a; color: #fff; }
html body .analytics-heatmap [data-level="4"] { background: #10472c; color: #fff; }
html body .analytics-three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
html body .analytics-section-heading { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: baseline; margin-bottom: -10px; }
html body .analytics-section-heading p { color: var(--ux-muted); font-size: 12px; }
html body .analytics-retention-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
html body .analytics-retention-grid article { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--ux-canvas); border-radius: 10px; }
html body .analytics-retention-grid span, html body .analytics-retention-grid small { font-size: 13px; line-height: 1.5; color: var(--ux-muted); }
html body .analytics-retention-grid strong { font-size: 30px; line-height: 1.2; letter-spacing: -.03em; }
html body .analytics-more { padding-block: 8px; }
html body .analytics-more[open] { padding-bottom: 24px; }
html body .analytics-more > summary { font-size: 16px; }
html body .analytics-more > .analytics-three-grid { margin-top: 14px; }
html body .analytics-more .analytics-panel { padding: 18px; }
html body .analytics-methodology { border-top: 1px solid var(--ux-border); padding: 24px 4px; color: var(--ux-muted); }
html body .analytics-methodology h2 { font-size: 16px; color: var(--ux-ink); }
html body .analytics-methodology p { margin-top: 10px; font-size: 13px; line-height: 1.7; max-width: 110ch; }
html body .analytics-methodology dl { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 20px 0 0; font-size: 12px; }
html body .analytics-methodology dd { margin: 4px 0 0; font-size: 14px; color: var(--ux-ink); }
@media (max-width: 1200px) {
  html body .analytics-scroll-hint { display: block; }
  html body .analytics-heading { align-items: flex-start; flex-wrap: wrap; }
  html body .analytics-main-grid { grid-template-columns: minmax(0, 1fr); }
  html body .analytics-three-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  html body .analytics-dashboard { gap: 20px; }
  html body .analytics-period { width: 100%; }
  html body .analytics-period label { flex: 1; min-width: 0; }
  html body .analytics-period select { width: 100%; min-width: 0; font-size: 16px; }
  html body .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body .analytics-kpi { padding: 15px; gap: 8px; }
  html body .analytics-panel { padding: 18px; }
  html body .analytics-three-grid { grid-template-columns: minmax(0, 1fr); }
  html body .analytics-retention-grid { grid-template-columns: minmax(0, 1fr); }
  html body .analytics-retention-grid article { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
  html body .analytics-retention-grid small { grid-column: 1 / -1; }
  html body .analytics-panel-heading { flex-wrap: wrap; }
  html body .analytics-jump { gap: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html body *, html body *::before, html body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}