/*
 * evento dashboard kit
 * Source: Figma "evento Admin Dashboard" page, frames "00 Dashboard look and parts" (2220:2197)
 * and "00b Table states" (2239:5045). Dark, Urbanist, desktop 1440.
 * Rules from the design: tables and forms first, colour only for status; one Primary
 * button per screen; Danger is an outline that always opens a confirm box, the solid
 * red "Confirm" is only the last step inside that box; numbers right-aligned and tabular.
 */

:root {
  /* Colours (names as in Figma) */
  --ev-page: #000000;
  --ev-panel: #0f0f17;
  --ev-card: #15151d;
  --ev-raised: #22222c;
  --ev-line: #262632;
  --ev-text: #ffffff;
  --ev-muted: #c4c4c4;
  --ev-secondary: #8e8e9a;
  --ev-disabled: #5a5a66;
  --ev-brand: #8c67e5;
  --ev-brand-deep: #7650db;
  --ev-soft: #b69fff;
  --ev-tint: #241c3d;
  --ev-ok: #3ddc84;
  --ev-ok-bg: #12301f;
  --ev-warn: #f5b547;
  --ev-warn-bg: #3a2d12;
  --ev-bad: #ff5a6e;
  --ev-bad-bg: #3a1219;
  --ev-teal: #2dd4bf; /* Figma #2DD4BF */

  /* Accessibility (day 4 check, WCAG AA): white text needs 4.5:1, field edges 3:1.
     Figma brand #8C67E5 gives white text 4.05:1 and bad #FF5A6E 3.03:1, so solid
     buttons use darker fills; line #262632 is 1.4:1, so fields get their own edge. */
  --ev-btn-primary: #7650db;       /* = brandDeep, white 5.33:1 */
  --ev-btn-primary-hover: #6a45cc; /* white 6.29:1 */
  --ev-btn-confirm: #c93246;       /* white 5.21:1 */
  --ev-btn-confirm-hover: #b02a3d;
  --ev-field-line: #6b6b7a;        /* 4.0:1 on page, 3.5:1 on card */

  /* Type */
  --ev-font: "Urbanist", "El Messiri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ev-title: 800 32px/1.15 var(--ev-font);
  --ev-section: 700 20px/1.3 var(--ev-font);
  --ev-body: 500 15px/1.5 var(--ev-font);
  --ev-number: 800 28px/1.2 var(--ev-font);

  /* Shape and space */
  --ev-r-sm: 10px;
  --ev-r-md: 12px;
  --ev-r-lg: 18px;
  --ev-r-xl: 20px;
  --ev-sidebar: 248px;
  --ev-topbar: 72px;
  color-scheme: dark;
}

/* ---------- Shell ---------- */
.ev-body { margin: 0; background: var(--ev-page); color: var(--ev-text); font: var(--ev-body); -webkit-font-smoothing: antialiased; }
.ev-body *, .ev-body *::before, .ev-body *::after { box-sizing: border-box; }
.ev-body a { color: var(--ev-soft); text-decoration: none; }
.ev-body a:hover { text-decoration: underline; }
.ev-body :focus-visible { outline: 2px solid var(--ev-soft); outline-offset: 2px; }

.ev-shell { display: grid; grid-template-columns: var(--ev-sidebar) minmax(0, 1fr); min-height: 100vh; }
.ev-main { display: flex; flex-direction: column; min-width: 0; }
.ev-content { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Sidebar */
.ev-sidebar { background: var(--ev-panel); border-right: 1px solid var(--ev-line); padding: 24px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ev-logo { display: flex; align-items: center; gap: 8px; padding: 0 8px 18px; color: var(--ev-text) !important; text-decoration: none !important; }
.ev-logo__name { font: 800 22px/1 var(--ev-font); }
.ev-logo__tag { background: var(--ev-tint); color: var(--ev-soft); font: 700 11px/1 var(--ev-font); padding: 4px 8px; border-radius: 6px; }
.ev-nav-group { color: var(--ev-secondary); font: 700 11px/1 var(--ev-font); letter-spacing: .08em; text-transform: uppercase; padding: 14px 12px 4px; }
.ev-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--ev-r-sm); color: var(--ev-muted) !important; font: 600 14px/1.35 var(--ev-font); }
.ev-nav-item svg { color: var(--ev-secondary); flex: none; }
.ev-nav-item:hover { background: var(--ev-card); text-decoration: none !important; }
.ev-nav-item.is-active { background: var(--ev-tint); color: var(--ev-text) !important; }
.ev-nav-item.is-active svg { color: var(--ev-soft); }

/* Top bar */
.ev-topbar { height: var(--ev-topbar); display: flex; align-items: center; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--ev-line); background: var(--ev-page); position: sticky; top: 0; z-index: 5; }
.ev-search { display: flex; align-items: center; gap: 10px; width: 460px; max-width: 100%; height: 42px; padding: 0 14px; background: var(--ev-card); border: 1px solid var(--ev-field-line); border-radius: var(--ev-r-md); color: var(--ev-secondary); }
.ev-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ev-text); font: 500 14px/1 var(--ev-font); outline: none; }
.ev-search input::placeholder { color: var(--ev-secondary); }
.ev-topbar__spacer { flex: 1; }
.ev-topbar__date { color: var(--ev-secondary); font: 600 14px/1 var(--ev-font); white-space: nowrap; }
.ev-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ev-tint); color: var(--ev-soft); display: grid; place-items: center; font: 700 14px/1 var(--ev-font); }
.ev-user { display: flex; align-items: center; gap: 10px; color: var(--ev-muted); font: 600 13px/1.2 var(--ev-font); }

/* ---------- Page header ---------- */
.ev-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ev-title { font: var(--ev-title); margin: 0; }
.ev-subtitle { color: var(--ev-secondary); margin: 6px 0 0; max-width: 72ch; }
.ev-section-title { font: var(--ev-section); margin: 0; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Card and stat tile ---------- */
.ev-card { background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-r-xl); }
.ev-card__body { padding: 20px; }
.ev-card__head { padding: 18px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ev-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ev-stat { background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ev-stat__label { color: var(--ev-secondary); font: 600 13px/1.4 var(--ev-font); }
.ev-stat__value { font: var(--ev-number); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ev-stat__note { color: var(--ev-secondary); font: 600 13px/1.4 var(--ev-font); }
.ev-stat__note.is-up { color: var(--ev-ok); }
.ev-stat__note.is-down { color: var(--ev-bad); }

/* ---------- Pills (status only) ---------- */
.ev-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font: 700 12px/16px var(--ev-font); white-space: nowrap; }
.ev-pill--ok { background: var(--ev-ok-bg); color: var(--ev-ok); }
.ev-pill--warn { background: var(--ev-warn-bg); color: var(--ev-warn); }
.ev-pill--bad { background: var(--ev-bad-bg); color: var(--ev-bad); }
.ev-pill--draft { background: var(--ev-raised); color: var(--ev-muted); }
.ev-pill--brand { background: var(--ev-tint); color: var(--ev-soft); }

/* ---------- Buttons ---------- */
.ev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 41px; padding: 0 18px; border-radius: var(--ev-r-md); border: 1px solid transparent; font: 700 14px/1 var(--ev-font); cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.ev-btn--primary { background: var(--ev-btn-primary); color: #fff !important; }
.ev-btn--primary:hover { background: var(--ev-btn-primary-hover); }
.ev-btn--secondary { background: var(--ev-raised); color: #fff !important; }
.ev-btn--secondary:hover { background: var(--ev-line); }
.ev-btn--danger { background: transparent; color: var(--ev-bad) !important; border-color: rgba(255, 90, 110, .6); }
.ev-btn--danger:hover { background: var(--ev-bad-bg); }
.ev-btn--ghost { background: transparent; color: var(--ev-soft) !important; border-color: var(--ev-line); }
.ev-btn--ghost:hover { background: var(--ev-card); }
.ev-btn--confirm { background: var(--ev-btn-confirm); color: #fff !important; }
.ev-btn--confirm:hover { background: var(--ev-btn-confirm-hover); }
.ev-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--ev-r-sm); }
.ev-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Forms and filter bar ---------- */
.ev-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 20px; }
.ev-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.ev-field--grow { flex: 1; min-width: 240px; }
.ev-label { color: var(--ev-secondary); font: 600 12px/1.2 var(--ev-font); }
.ev-input, .ev-select, .ev-textarea { height: 41px; padding: 0 12px; background: var(--ev-page); color: var(--ev-text); border: 1px solid var(--ev-field-line); border-radius: var(--ev-r-md); font: 500 14px/1 var(--ev-font); }
.ev-textarea { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.4; }
.ev-input:focus, .ev-select:focus, .ev-textarea:focus { border-color: var(--ev-brand); outline: none; }
.ev-help { color: var(--ev-secondary); font: 500 12px/1.4 var(--ev-font); }
.ev-error-text { color: var(--ev-bad); font: 600 12px/1.4 var(--ev-font); }

/* ---------- Alerts ---------- */
.ev-alert { padding: 12px 16px; border-radius: var(--ev-r-md); font: 600 14px/1.4 var(--ev-font); border: 1px solid var(--ev-line); }
.ev-alert--ok { background: var(--ev-ok-bg); color: var(--ev-ok); border-color: transparent; }
.ev-alert--bad { background: var(--ev-bad-bg); color: var(--ev-bad); border-color: transparent; }
.ev-alert--warn { background: var(--ev-warn-bg); color: var(--ev-warn); border-color: transparent; }

/* ---------- Table ---------- */
.ev-table-wrap { background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-r-xl); overflow: hidden; }
.ev-table-scroll { overflow-x: auto; }
.ev-table { width: 100%; border-collapse: collapse; font: 500 14px/1.4 var(--ev-font); }
.ev-table thead th { background: var(--ev-raised); color: var(--ev-secondary); font: 700 11px/13px var(--ev-font); letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 12px 18px; white-space: nowrap; }
.ev-table thead th a { color: inherit; }
.ev-table thead th.is-sorted, .ev-table thead th.is-sorted a { color: var(--ev-soft); }
.ev-table tbody td { padding: 14px 18px; border-top: 1px solid var(--ev-line); vertical-align: top; color: var(--ev-muted); }
.ev-table tbody tr:first-child td { border-top: 0; }
.ev-table tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.ev-table .ev-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-table .ev-strong { color: var(--ev-text); font-weight: 700; }
.ev-sub { display: block; color: var(--ev-secondary); font-size: 12px; }

/* Table states: empty, no results, failed, loading */
.ev-state { padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ev-state__icon { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; font: 800 20px/1 var(--ev-font); }
.ev-state__icon--ok { background: var(--ev-ok-bg); color: var(--ev-ok); }
.ev-state__icon--info { background: var(--ev-tint); color: var(--ev-soft); }
.ev-state__icon--bad { background: var(--ev-bad-bg); color: var(--ev-bad); }
.ev-state__title { font: 700 18px/1.25 var(--ev-font); color: var(--ev-text); margin: 0; }
.ev-state__text { color: var(--ev-secondary); margin: 0; max-width: 60ch; }
.ev-skeleton { display: block; height: 12px; border-radius: 999px; background: var(--ev-raised); animation: ev-pulse 1.4s ease-in-out infinite; }
@keyframes ev-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ev-skeleton { animation: none; } }

/* Paging */
.ev-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--ev-line); color: var(--ev-secondary); font: 500 13px/1 var(--ev-font); }
.ev-pager__pages { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-pager__btn { min-width: 32px; height: 32px; padding: 0 10px; display: inline-grid; place-items: center; border: 1px solid var(--ev-line); border-radius: 8px; color: var(--ev-muted) !important; font: 700 13px/1 var(--ev-font); }
.ev-pager__btn.is-current { border-color: var(--ev-brand); color: var(--ev-text) !important; background: var(--ev-tint); }
.ev-pager__btn.is-disabled { opacity: .4; pointer-events: none; }

/* ---------- Confirm box ---------- */
.ev-dialog { border: 1px solid var(--ev-line); border-radius: var(--ev-r-xl); background: var(--ev-card); color: var(--ev-text); padding: 0; width: min(480px, calc(100vw - 32px)); }
.ev-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.ev-dialog__body { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ev-dialog__title { font: var(--ev-section); margin: 0; }
.ev-dialog__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.ev-dialog__facts dt { color: var(--ev-secondary); font-weight: 600; }
.ev-dialog__facts dd { margin: 0; color: var(--ev-text); font-variant-numeric: tabular-nums; }
.ev-dialog__actions { display: flex; justify-content: flex-end; gap: 12px; }

/* ---------- Layout helpers ---------- */
.ev-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ev-stack { display: flex; flex-direction: column; gap: 12px; }
.ev-muted { color: var(--ev-secondary); }

@media (max-width: 900px) {
  .ev-shell { grid-template-columns: 1fr; }
  .ev-sidebar { position: static; height: auto; }
  .ev-content { padding: 20px 16px 40px; }
  .ev-topbar { padding: 0 16px; }
  .ev-topbar__date { display: none; }
}

/* Arabic (Figma: El Messiri). Urbanist has no Arabic letters, so Arabic text
   falls through to El Messiri in --ev-font. Every field for Arabic text
   (name ends in _ar, also rows added by script) types right to left. */
.ev-body input[name$="_ar"]:not([type="checkbox"]):not([type="radio"]),
.ev-body input[name$="_ar]"]:not([type="checkbox"]):not([type="radio"]),
.ev-body input[data-name$="_ar"],
.ev-body textarea[name$="_ar"],
.ev-body textarea[name$="_ar]"] { direction: rtl; text-align: right; }

/* Skip link (first Tab on every page) */
.ev-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--ev-r-md); background: var(--ev-btn-primary); color: #fff !important; font: 700 14px/1 var(--ev-font); }
.ev-skip:focus { top: 16px; }
/* Visually hidden, still read by screen readers */
.ev-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================================
 * Review 11 · analytics: chart colours, light theme, filter bar, KPI tiles, charts.
 * Chart colours were checked with the dataviz validator (6 slots, CVD-safe in order):
 * dark on card #15151d all pass; light on #ffffff passes with slot 6 (yellow) under 3:1,
 * so every chart also has "Show as table" and direct labels.
 * ===================================================================== */
:root {
  --evc-1: #8c67e5; /* evento purple */
  --evc-2: #14a896; /* teal */
  --evc-3: #d95926; /* orange */
  --evc-4: #3987e5; /* blue */
  --evc-5: #d55181; /* magenta */
  --evc-6: #c98500; /* yellow */
  --evc-prev: #8e8e9a;
  --evc-seq: #8c67e5;
  --evc-grid: #262632;
  --evc-axis: #3a3a48;
}

/* Light theme (variables only; set data-theme="light" on <html>). Figma is dark-first,
   so no switch is shown yet; the kit and the charts are ready for it. */
:root[data-theme="light"] {
  --ev-page: #f5f5f8;
  --ev-panel: #ffffff;
  --ev-card: #ffffff;
  --ev-raised: #f0eff5;
  --ev-line: #e4e3ec;
  --ev-text: #14141c;
  --ev-muted: #3d3d4a;
  --ev-secondary: #62626f;
  --ev-disabled: #a0a0ab;
  --ev-brand: #7650db;
  --ev-soft: #6a45cc;
  --ev-tint: #efeafd;
  --ev-ok: #138a4b;
  --ev-ok-bg: #e3f6eb;
  --ev-warn: #8f5b00;
  --ev-warn-bg: #fdf1dc;
  --ev-bad: #c22c40;
  --ev-bad-bg: #fde8eb;
  --ev-field-line: #8a8a98;
  --evc-1: #7650db;
  --evc-2: #0f9e8a;
  --evc-3: #eb6834;
  --evc-4: #2a78d6;
  --evc-5: #c2457a;
  --evc-6: #eda100;
  --evc-prev: #8a8a98;
  --evc-seq: #7650db;
  --evc-grid: #ececf2;
  --evc-axis: #c9c8d4;
  color-scheme: light;
}
:root[data-theme="light"] .ev-btn--secondary { color: var(--ev-text) !important; }
:root[data-theme="light"] .ev-table tbody tr:hover td { background: rgba(0, 0, 0, .02); }
:root[data-theme="light"] .ev-dialog::backdrop { background: rgba(20, 20, 28, .4); }

/* ---------- Filter bar ---------- */
.ev-fbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px 18px; }
.ev-fbar__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; flex: 1 1 640px; min-width: 0; }
.ev-fbar__form .ev-field { min-width: 140px; }
.ev-fbar__form .ev-select, .ev-fbar__form .ev-input { max-width: 240px; }
.ev-fbar__actions { display: flex; gap: 8px; }
.ev-fbar__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ev-fbar__toggle { display: inline-flex; align-items: center; gap: 8px; height: 41px; color: var(--ev-muted); font: 600 13px/1.2 var(--ev-font); cursor: pointer; }
.ev-fbar__toggle input { width: 16px; height: 16px; accent-color: var(--ev-brand); }
.ev-fbar__toggle:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* Date picker / dropdown (details + summary, no script needed) */
.ev-dp { position: relative; }
.ev-dp > summary { list-style: none; cursor: pointer; }
.ev-dp > summary::-webkit-details-marker { display: none; }
.ev-dp__btn { display: inline-flex; align-items: center; gap: 8px; height: 41px; padding: 0 12px; background: var(--ev-page); color: var(--ev-text); border: 1px solid var(--ev-field-line); border-radius: var(--ev-r-md); font: 500 14px/1 var(--ev-font); white-space: nowrap; }
.ev-dp__btn svg { color: var(--ev-secondary); flex: none; }
.ev-dp__text { color: var(--ev-secondary); }
.ev-dp[open] > .ev-dp__btn { border-color: var(--ev-brand); }
.ev-dp__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 260px; padding: 8px; background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-r-md); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.ev-dp--end .ev-dp__panel { left: auto; right: 0; min-width: 300px; }
.ev-dp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ev-dp__list a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ev-muted) !important; font: 600 14px/1.2 var(--ev-font); text-decoration: none !important; }
.ev-dp__list a:hover { background: var(--ev-raised); }
.ev-dp__list a.is-on { color: var(--ev-text) !important; font-weight: 700; }
.ev-dp__check { width: 16px; height: 16px; flex: none; color: var(--ev-soft); }
.ev-dp__custom { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 8px 4px; border-top: 1px solid var(--ev-line); }
.ev-dp__inputs { display: flex; align-items: center; gap: 8px; color: var(--ev-secondary); }
.ev-dp__inputs .ev-input { height: 36px; flex: 1; min-width: 0; }
.ev-dp__view { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ev-dp__view a { flex: 1; }
.ev-dp__remove { background: none; border: 0; color: var(--ev-secondary); font: 700 18px/1 var(--ev-font); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.ev-dp__remove:hover { background: var(--ev-bad-bg); color: var(--ev-bad); }

/* Chips: active filters, one click removes */
.ev-chips { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.ev-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border-radius: 999px; background: var(--ev-tint); color: var(--ev-text) !important; font: 600 12px/1.2 var(--ev-font); text-decoration: none !important; }
.ev-chip span { color: var(--ev-soft); font-size: 15px; line-height: 1; }
.ev-chip:hover { background: var(--ev-raised); }
.ev-chip--clear { background: transparent; color: var(--ev-soft) !important; padding-left: 8px; }

/* ---------- KPI tile ---------- */
.ev-kpi { position: relative; padding-bottom: 14px; }
.ev-kpi__delta { display: inline-flex; align-items: center; gap: 4px; color: var(--ev-muted); font: 700 13px/1.3 var(--ev-font); }
.ev-kpi__delta.is-good { color: var(--ev-ok); }
.ev-kpi__delta.is-bad { color: var(--ev-bad); }
.ev-kpi__vs { color: var(--ev-secondary); font-weight: 600; margin-left: 2px; }
.ev-kpi__spark { width: 100%; height: 30px; margin-top: 4px; display: block; overflow: visible; }

/* ---------- Charts ---------- */
.evc { margin: 0; min-width: 0; outline-offset: 4px; }
.evc--empty { padding: 28px 0; text-align: center; }
.evc-legend { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ev-muted); font: 600 12px/1.3 var(--ev-font); }
.evc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.evc-key { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--c); }
.evc-key--box { width: 10px; height: 10px; border-radius: 3px; }
.evc-key--dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.evc-plot { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: var(--h, 220px) auto; column-gap: 8px; }
.evc-yaxis { position: relative; }
.evc-yaxis span { position: absolute; right: 0; transform: translateY(50%); color: var(--ev-secondary); font: 600 11px/1 var(--ev-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.evc-canvas { position: relative; }
.evc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.evc-grid { stroke: var(--evc-grid); stroke-width: 1; }
.evc-base { stroke: var(--evc-axis); stroke-width: 1; }
.evc-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ev-card); pointer-events: none; }
.evc-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ev-secondary); opacity: .6; pointer-events: none; }
.evc-hits { position: absolute; inset: 0; display: flex; }
.evc-hits span { flex: 1; cursor: crosshair; }
.evc-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.evc-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 1px; cursor: default; }
.evc-col.is-hover { background: color-mix(in srgb, var(--ev-text) 5%, transparent); border-radius: 4px 4px 0 0; }
.evc-bar { display: block; width: 100%; max-width: 24px; min-height: 0; border-radius: 4px 4px 0 0; }
.evc-stack { display: flex; flex-direction: column-reverse; gap: 2px; width: 100%; max-width: 24px; }
.evc-seg { display: block; min-height: 1px; flex-basis: 0; }
.evc-stack .evc-seg:last-child { border-radius: 4px 4px 0 0; }
.evc-col.is-hover .evc-bar, .evc-col.is-hover .evc-seg { filter: brightness(1.15); }
.evc-xaxis { grid-column: 2; position: relative; height: 22px; margin-top: 6px; }
.evc-xaxis span { position: absolute; top: 0; transform: translateX(-50%); color: var(--ev-secondary); font: 600 11px/1.2 var(--ev-font); white-space: nowrap; }
.evc-xaxis span.is-first { transform: translateX(-10%); }
.evc-xaxis span.is-last { transform: translateX(-90%); }
.evc-table { margin-top: 10px; }
.evc-table > summary { cursor: pointer; color: var(--ev-soft); font: 600 12px/1.3 var(--ev-font); width: max-content; }
.evc-table__scroll { overflow-x: auto; max-height: 320px; overflow-y: auto; margin-top: 8px; }
.evc-table table, .evc-heat { border-collapse: collapse; font: 500 13px/1.3 var(--ev-font); color: var(--ev-muted); width: 100%; }
.evc-table th, .evc-table td { padding: 6px 10px; border-top: 1px solid var(--ev-line); text-align: left; white-space: nowrap; }
.evc-table thead th { color: var(--ev-secondary); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-top: 0; }
.evc-table .ev-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Horizontal bars and funnel: label · bar · value, all text visible */
.evc-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.evc-hbar { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.evc-hbar__label { color: var(--ev-text); font: 600 13px/1.3 var(--ev-font); min-width: 0; overflow-wrap: anywhere; }
.evc-hbar__track { height: 10px; border-radius: 0 4px 4px 0; background: transparent; position: relative; }
.evc-hbar__fill { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 0; }
.evc-hbar__value { color: var(--ev-text); font: 700 13px/1.3 var(--ev-font); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.evc-hbar__value .ev-sub { font-weight: 600; }
.evc-drop { color: var(--ev-secondary); font: 600 12px/1 var(--ev-font); padding-left: calc(34% + 12px); }
.evc--hbar .evc-hbar__track { height: 12px; }

/* Heatmap: one hue (evento purple), light → strong */
.evc-heat th { color: var(--ev-secondary); font: 600 11px/1.2 var(--ev-font); padding: 4px 6px; text-align: center; white-space: nowrap; }
.evc-heat tbody th { text-align: left; color: var(--ev-muted); font-size: 12px; padding-right: 12px; }
.evc-heat td { min-width: 34px; height: 30px; text-align: center; font: 700 11px/1 var(--ev-font); font-variant-numeric: tabular-nums; color: var(--ev-text); border: 2px solid var(--ev-card); border-radius: 6px;
  background: color-mix(in srgb, var(--evc-seq) calc(var(--v) * 100%), var(--ev-raised)); }
.evc-heat td.is-strong { color: #fff; }
.evc-scale { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ev-secondary); font: 600 11px/1 var(--ev-font); }
.evc-scale__ramp { width: 140px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--ev-raised), var(--evc-seq)); }

/* Tooltip (one per page) */
.evc-tip { position: fixed; z-index: 60; min-width: 140px; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: var(--ev-raised); border: 1px solid var(--ev-line); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); color: var(--ev-text); font: 500 12px/1.4 var(--ev-font); pointer-events: none; }
.evc-tip__title { color: var(--ev-secondary); font-weight: 700; margin-bottom: 6px; }
.evc-tip__row { display: flex; align-items: center; gap: 8px; }
.evc-tip__row strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.evc-tip__key { width: 12px; height: 2px; border-radius: 2px; background: var(--c); flex: none; }
.evc-tip__key.is-dash { background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 5px); }
.evc-tip__key.is-none { background: transparent; }
.evc-tip__name { color: var(--ev-secondary); }

/* Small sell-through bar in tables */
.ev-meter { display: block; width: 100%; min-width: 72px; height: 6px; border-radius: 3px; background: var(--ev-raised); margin-top: 6px; overflow: hidden; }
.ev-meter > span { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--evc-1); }

/* Analytics layout */
.ev-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ev-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ev-panel-card { background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-r-xl); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ev-panel-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ev-panel-card__title { font: 700 16px/1.3 var(--ev-font); margin: 0; color: var(--ev-text); }
.ev-panel-card__note { color: var(--ev-secondary); font: 500 12px/1.4 var(--ev-font); margin: 0; }
.ev-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1280px) { .ev-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ev-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ev-kpis, .ev-grid-2, .ev-grid-3 { grid-template-columns: 1fr; } .evc-hbar { grid-template-columns: minmax(90px, 40%) minmax(0, 1fr) auto; } .evc-drop { padding-left: 0; } }
@media (forced-colors: active) { .evc-bar, .evc-seg, .evc-hbar__fill, .ev-meter > span { background: CanvasText !important; } .evc-heat td { forced-color-adjust: none; } }
.ev-fbar__more { flex-basis: 100%; }
.ev-fbar__more > summary { cursor: pointer; color: var(--ev-soft); font: 700 13px/1.3 var(--ev-font); width: max-content; }
.ev-fbar__more-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ev-line); }
.ev-fbar__more-body .ev-field { min-width: 130px; }
.ev-range-pair { display: flex; align-items: center; gap: 6px; }
.ev-range-pair .ev-input { width: 110px; }
.ev-totals { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; padding: 14px 18px; border-top: 1px solid var(--ev-line); background: var(--ev-raised); color: var(--ev-muted); font: 600 13px/1.4 var(--ev-font); }
.ev-totals strong { color: var(--ev-text); font-size: 15px; font-variant-numeric: tabular-nums; }
.ev-th-sort { display: inline-flex; align-items: center; gap: 4px; }
.ev-fbar__form { flex-basis: 100%; }
.ev-fbar__foot { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ev-fbar__foot .ev-chips { flex: 1 1 auto; flex-basis: auto; }
.ev-fbar__foot .ev-fbar__tools { margin-left: auto; }
.ev-fbar .ev-field--grow { flex: 1 1 280px; max-width: 420px; }
.ev-kpi__delta { flex-wrap: wrap; column-gap: 4px; row-gap: 0; }
.ev-kpi__vs { flex-basis: 100%; margin-left: 0; font-size: 12px; }
.ev-kpis .ev-stat__value { font-size: 26px; }
.ev-fbar .ev-field--grow { flex: 1 1 240px; max-width: 340px; }
.ev-fbar__form .ev-select { max-width: 210px; }
.ev-grid-wide { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .ev-grid-wide { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ev-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ev-kpis { grid-template-columns: 1fr; } }