/* ext_analytics — «Аналитика» MaskGR и eSIM. Только новые классы x-analytics-*; существующие классы ядра не трогаю. */
.x-analytics-entry { background: linear-gradient(120deg, color-mix(in srgb, #7b5cff 17%, var(--card)), var(--card) 62%); }
.x-analytics-entry .offer-ico { background: color-mix(in srgb, #7b5cff 22%, transparent); }
.x-analytics-entry.esim { background: linear-gradient(120deg, color-mix(in srgb, #14b8a6 17%, var(--card)), var(--card) 62%); }
.x-analytics-entry.esim .offer-ico { background: color-mix(in srgb, #14b8a6 24%, transparent); }
.x-analytics-entry .grow { min-width: 0; }
.x-analytics-entry span { overflow: hidden; text-overflow: ellipsis; }

.x-analytics-lines p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.42; }
.x-analytics-lines p:first-child { margin-top: 12px; }
.x-analytics-note { color: var(--hint); font-size: 12.5px; line-height: 1.38; margin: 8px 4px 0; }
.x-analytics-note b { color: var(--text); font-weight: 650; }
.hero .x-analytics-note, .card .x-analytics-note { margin: 10px 0 0; }

/* new vs repeat compare inside the hero */
.x-analytics-cmp { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px 10px; align-items: center; margin-top: 14px; position: relative; z-index: 1; }
.x-analytics-cmp .k { color: var(--sub); font-size: 13px; font-weight: 600; }
.x-analytics-pair > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.x-analytics-pair > div + div { margin-top: 4px; }
.x-analytics-pair i { display: block; height: 9px; border-radius: 5px; background: var(--accent); min-width: 3px; flex: none; max-width: 62%; }
.x-analytics-pair i.prev { background: color-mix(in srgb, var(--hint) 45%, transparent); }
.x-analytics-pair em { font-style: normal; font-size: 12px; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* SVG bars */
.x-analytics-chart { width: 100%; height: 100px; display: block; margin-top: 4px; }
.x-analytics-chart rect { cursor: pointer; transition: opacity .15s; }
.x-analytics-chart rect.a, .x-analytics-chart rect.e { fill: color-mix(in srgb, var(--accent) 80%, transparent); }
.x-analytics-chart rect.b { fill: color-mix(in srgb, var(--ok) 75%, transparent); }
.x-analytics-chart rect.d { fill: color-mix(in srgb, var(--danger) 70%, transparent); }
.x-analytics-chart rect.p { fill: color-mix(in srgb, var(--warn) 80%, transparent); }
.x-analytics-chart rect.z { fill: color-mix(in srgb, var(--hint) 25%, transparent); }
.x-analytics-chart rect.sel { opacity: .6; }
.x-analytics-axis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; color: var(--hint); font-size: 11px; text-align: center; margin-top: 4px; }
.x-analytics-axis span { overflow: hidden; white-space: nowrap; }
.x-analytics-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--hint); font-size: 12px; margin-top: 8px; position: relative; z-index: 1; }
.x-analytics-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.x-analytics-legend i.a { background: var(--accent); }
.x-analytics-legend i.b { background: color-mix(in srgb, var(--ok) 75%, transparent); }
.x-analytics-legend i.p { background: color-mix(in srgb, var(--hint) 45%, transparent); }

/* tables (cohorts, churn) */
.x-analytics-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.x-analytics-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.x-analytics-table th { color: var(--hint); font-weight: 600; font-size: 11px; line-height: 1.2; text-align: right; padding: 0 4px 6px; vertical-align: bottom; }
.x-analytics-table td { padding: 7px 4px; border-top: 1px solid var(--sep); text-align: right; vertical-align: top; white-space: nowrap; }
.x-analytics-table th:first-child, .x-analytics-table td:first-child { text-align: left; padding-left: 0; }
.x-analytics-table th:last-child, .x-analytics-table td:last-child { padding-right: 0; }
.x-analytics-table td small { display: block; color: var(--hint); font-size: 10.5px; margin-top: 1px; }
.x-analytics-table tr.cur td { color: var(--sub); }

/* funnel */
.x-analytics-fstep + .x-analytics-fstep { margin-top: 10px; }
.x-analytics-ftop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.x-analytics-ftop span { min-width: 0; }
.x-analytics-ftop b { flex: none; font-variant-numeric: tabular-nums; }
.x-analytics-ftop b small { color: var(--hint); font-weight: 500; font-size: 12px; }
.x-analytics-track { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--hint) 16%, transparent); margin-top: 5px; overflow: hidden; }
.x-analytics-track i { display: block; height: 100%; border-radius: 7px; background: var(--accent); }
.x-analytics-drop { color: var(--hint); font-size: 12px; margin-top: 4px; }
.x-analytics-drop.worst { color: var(--danger); font-weight: 600; }
.x-analytics-fstep.worst .x-analytics-track i { background: color-mix(in srgb, var(--warn) 85%, var(--accent)); }