/* ============================================================================
   Аналитика бренда — собственный слой стилей поверх дашборда Kruto AI.
   Своя палитра и типографика: страница читается как сводка, а не как таблица.
   Все размеры и цвета — токенами, чтобы панель можно было пересобрать целиком.
   ========================================================================== */
.anx {
  --a-ink: #101320;
  --a-ink2: #4a5163;
  --a-muted: #8b93a5;
  --a-line: #e9ecf3;
  --a-hair: #f1f3f8;
  --a-surface: #ffffff;
  --a-sunken: #f7f8fc;

  /* серии графиков: индиго — просмотры, бирюза — отклик, фиалка — второй ряд */
  --s1: #4361ee;
  --s2: #12a594;
  --s3: #7a5cf5;
  --s4: #ef8f3c;
  --s5: #e0568a;
  --s6: #35bdd8;

  --a-good: #12915a;
  --a-good-bg: #e6f6ee;
  --a-bad: #d4483f;
  --a-bad-bg: #fdeceb;

  --a-r: 16px;
  --a-gap: 16px;
  --a-shadow: 0 1px 2px rgba(16, 19, 32, .04), 0 6px 20px rgba(16, 19, 32, .05);
  --a-shadow-lift: 0 2px 6px rgba(16, 19, 32, .06), 0 14px 34px rgba(16, 19, 32, .10);

  color: var(--a-ink);
  font-variant-numeric: tabular-nums;
}

/* ── шапка страницы ─────────────────────────────────────────────────────── */
.anx-top { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.anx-top h1 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.anx-top p { margin: 5px 0 0; font-size: 13.4px; color: var(--a-muted); max-width: 62ch; }
.anx-top .anx-since { margin-left: auto; font-size: 12px; color: var(--a-muted); text-align: right; line-height: 1.5; }
.anx-top .anx-since b { display: block; color: var(--a-ink2); font-size: 13px; font-weight: 700; }

/* ── панель фильтров: сегментированные группы ───────────────────────────── */
.anx-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.anx-seg { display: inline-flex; background: var(--a-sunken); border: 1px solid var(--a-line);
           border-radius: 11px; padding: 3px; gap: 2px; }
.anx-seg button { border: 0; background: transparent; color: var(--a-ink2); cursor: pointer;
                  font: 700 12.5px "Roboto", system-ui, sans-serif; padding: 6px 12px; border-radius: 8px;
                  transition: background .14s, color .14s, box-shadow .14s; }
.anx-seg button:hover { color: var(--a-ink); }
.anx-seg button[aria-pressed="true"] { background: var(--a-surface); color: var(--a-ink);
                                       box-shadow: 0 1px 2px rgba(16,19,32,.06), 0 2px 8px rgba(16,19,32,.07); }
.anx-seg .lbl { align-self: center; font: 700 11px "Roboto", system-ui, sans-serif; color: var(--a-muted);
                text-transform: uppercase; letter-spacing: .07em; padding: 0 9px 0 7px; }
.anx-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--a-sunken);
              border: 1px solid var(--a-line); border-radius: 11px; padding: 8px 13px; cursor: pointer;
              font: 700 12.5px "Roboto", system-ui, sans-serif; color: var(--a-ink2); user-select: none; }
.anx-toggle input { appearance: none; width: 30px; height: 17px; border-radius: 99px; background: #d7dbe6;
                    position: relative; cursor: pointer; transition: background .16s; flex: none; }
.anx-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
                           border-radius: 99px; background: #fff; transition: transform .16s;
                           box-shadow: 0 1px 2px rgba(0,0,0,.22); }
.anx-toggle input:checked { background: var(--s1); }
.anx-toggle input:checked::after { transform: translateX(13px); }

/* ── карточки метрик ────────────────────────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--a-gap); margin-bottom: var(--a-gap); }
@media (max-width: 1360px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.kpi { position: relative; border-radius: var(--a-r); padding: 15px 17px 46px; color: #fff; overflow: hidden;
       box-shadow: var(--a-shadow); isolation: isolate; }
/* блик сверху — чтобы плоская заливка не выглядела печатью на бумаге */
.kpi::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
              background: radial-gradient(120% 90% at 8% -20%, rgba(255,255,255,.30), rgba(255,255,255,0) 60%); }
.kpi .k-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
              opacity: .82; margin-bottom: 6px; }
.kpi .k-val { font-size: 29px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.kpi .k-sub { font-size: 12px; opacity: .8; margin-top: 3px; }
.kpi .k-d { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; padding: 3px 9px;
            border-radius: 99px; background: rgba(255,255,255,.20); font-size: 12px; font-weight: 700;
            backdrop-filter: blur(2px); }
.kpi .k-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; opacity: .55; }
.kpi.g1 { background: linear-gradient(140deg, #3b4fd8, #5b7cf0); }
.kpi.g2 { background: linear-gradient(140deg, #6c3fe0, #9a63f2); }
.kpi.g3 { background: linear-gradient(140deg, #0e8f80, #2fc39c); }
.kpi.g4 { background: linear-gradient(140deg, #1b7fa8, #37b6d4); }
.kpi.g5 { background: linear-gradient(140deg, #c1476f, #ef7f6b); }

/* ── панели ─────────────────────────────────────────────────────────────── */
.anx-grid { display: grid; gap: var(--a-gap); margin-bottom: var(--a-gap); }
.g-72 { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); }
.g-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1180px) { .g-72, .g-3, .g-4, .g-21 { grid-template-columns: minmax(0, 1fr); } }

.pane { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: var(--a-r);
        padding: 16px 18px 18px; box-shadow: var(--a-shadow); min-width: 0; }
.pane-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pane-h h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.pane-h .h-note { font-size: 12px; color: var(--a-muted); }
.pane-h .h-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.pane > .p-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--a-muted); line-height: 1.5; }
.pane .p-foot { margin: 12px 0 0; font-size: 12px; color: var(--a-muted); line-height: 1.5; }

/* легенда графиков */
.anx-leg { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; color: var(--a-ink2); font-weight: 600; }
.anx-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px;
             vertical-align: -1px; }
.anx-leg .ln { width: 14px; height: 3px; border-radius: 2px; }

/* ── горизонтальные бары (рубрики, срезы) ───────────────────────────────── */
.bars-h { display: grid; gap: 9px; }
/* имя не должно съедать дорожку: в узких панелях оно ограничено долей строки */
.bar-i { display: grid; grid-template-columns: minmax(56px, 38%) minmax(38px, 1fr) auto; gap: 10px;
         align-items: center; font-size: 12.8px; }
.bar-i .b-n { color: var(--a-ink2); font-weight: 600; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; min-width: 0; }
.bar-i .b-t { display: block; background: var(--a-hair); border-radius: 99px; height: 9px; overflow: hidden; }
.bar-i .b-f { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--s1), #6f88f5);
              transition: width .5s cubic-bezier(.22,.8,.3,1); }
.bar-i .b-v { font-weight: 700; font-size: 12.6px; min-width: 58px; text-align: right; }
.bar-i .b-c { color: var(--a-muted); font-weight: 600; font-size: 11.5px; }
.bar-i.dim .b-f { background: linear-gradient(90deg, #b9c0d4, #cfd5e6); }

/* сравнение «свои против совместных» */
.cmp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp2 .c-box { border: 1px solid var(--a-line); border-radius: 12px; padding: 12px 14px; background: var(--a-sunken); }
.cmp2 .c-box.hi { background: linear-gradient(160deg, #eef1fe, #f6f2ff); border-color: #dbe1fb; }
.cmp2 .c-l { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
             color: var(--a-muted); }
.cmp2 .c-v { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; }
.cmp2 .c-s { font-size: 12px; color: var(--a-ink2); margin-top: 2px; }

/* ── таблица топа ───────────────────────────────────────────────────────── */
.anx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.anx-tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
              color: var(--a-muted); font-weight: 700; padding: 0 10px 8px; border-bottom: 1px solid var(--a-line); }
.anx-tbl td { padding: 9px 10px; border-bottom: 1px solid var(--a-hair); vertical-align: middle; }
.anx-tbl tr:last-child td { border-bottom: 0; }
.anx-tbl tr:hover td { background: var(--a-sunken); }
.anx-tbl .num { text-align: right; white-space: nowrap; font-weight: 700; }
.anx-tbl a { color: var(--a-ink); text-decoration: none; font-weight: 700; }
.anx-tbl a:hover { color: var(--s1); }
.anx-tbl .cap { color: var(--a-ink2); font-weight: 400; max-width: 200px; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; display: block; font-size: 12.4px; }
.anx-tbl .tag { max-width: 128px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.anx-tbl td { padding: 8px 8px; }
/* на ноутбучных ширинах подпись ужимается, иначе таблица уезжает вбок */
@media (max-width: 1440px) { .anx-tbl .cap { max-width: 140px; } }
.mini-bar { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--s1), #7a90f7); min-width: 3px; }

/* ── чипы-метки ─────────────────────────────────────────────────────────── */
.tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700;
       background: var(--a-sunken); color: var(--a-ink2); border: 1px solid var(--a-line); white-space: nowrap; }
.tag.rl { background: #eaeefe; color: #2f45b8; border-color: transparent; }
.tag.cr { background: #f1ecfe; color: #5b34c9; border-color: transparent; }
.tag.ph { background: #eef1f5; color: #5a6577; border-color: transparent; }
.tag.warn { background: #fdf1e3; color: #a25a12; border-color: transparent; }
.tag.crit { background: var(--a-bad-bg); color: var(--a-bad); border-color: transparent; }
.tag.ok { background: var(--a-good-bg); color: var(--a-good); border-color: transparent; }

.d-up { color: var(--a-good); } .d-dn { color: var(--a-bad); }
.pill-d { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px;
          font-size: 11.5px; font-weight: 700; }
.pill-d.up { background: var(--a-good-bg); color: var(--a-good); }
.pill-d.dn { background: var(--a-bad-bg); color: var(--a-bad); }
.pill-d.flat { background: var(--a-sunken); color: var(--a-muted); }

/* ── риски ──────────────────────────────────────────────────────────────── */
.risk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--a-hair); }
.risk:last-child { border-bottom: 0; padding-bottom: 0; }
.risk .r-n { font-size: 21px; font-weight: 800; letter-spacing: -.02em; min-width: 62px; }
.risk .r-t { font-size: 12.8px; color: var(--a-ink2); line-height: 1.5; }
.risk .r-t b { color: var(--a-ink); }

/* ── подсказка на графике ───────────────────────────────────────────────── */
.anx-tip { position: fixed; z-index: 60; pointer-events: none; background: #1a1e2c; color: #fff;
           border-radius: 10px; padding: 8px 11px; font-size: 12px; line-height: 1.5; font-weight: 600;
           box-shadow: 0 8px 26px rgba(16,19,32,.28); opacity: 0; transition: opacity .12s; white-space: nowrap; }
.anx-tip.on { opacity: 1; }
.anx-tip .t-h { font-size: 11px; opacity: .7; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
                margin-bottom: 3px; }
.anx-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.anx svg text { font-family: "Roboto", system-ui, sans-serif; }
.anx .ax { font-size: 11px; fill: var(--a-muted); font-weight: 600; }
.anx .gl { stroke: var(--a-hair); stroke-width: 1; }
.anx .empty { color: var(--a-muted); font-size: 13px; padding: 22px 0; text-align: center; }

/* компактный переключатель внутри шапки блока — воронка их держит две */
.anx-seg.mini { padding: 2px; border-radius: 9px; }
.anx-seg.mini button { font-size: 11.5px; padding: 4px 9px; border-radius: 7px; }
.anx-seg[hidden] { display: none; }

/* График динамики приехал сюда из раздела Воронка: он свёрстан карточкой штаба,
   поэтому ширину и отступы даём здесь, а не переписываем его разметку. */
.anx .anx-wide { width: 100%; margin: 0 0 var(--a-gap); }
.anx .anx-wide .card { margin: 0; }

/* ── воронка по периодам ── */
.fun-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.fun-chips .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #8b93a5; margin-right: 4px; }
.fun-chip { border: 1px solid #dfe3ec; background: #fff; border-radius: 20px; padding: 4px 11px;
  font: 600 12px/1.4 inherit; font-family: inherit; color: #3c4356; cursor: pointer; }
.fun-chip:hover { border-color: #4361ee; color: #3450d4; }
.fun-chip[aria-pressed="true"] { background: #eceffd; color: #3450d4; border-color: transparent; }
.fun-chips input[type="date"] { border: 1px solid #dfe3ec; border-radius: 8px; padding: 3px 7px;
  font: 600 12px system-ui, sans-serif; color: #3c4356; background: #fff; }
.fun-cols { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.fun-col { flex: 1 1 240px; min-width: 230px; max-width: 380px; }
.fun-col h4 { margin: 0; font-size: 13.5px; }
.fun-col .cov { font-size: 11.5px; color: #8b93a5; margin: 1px 0 8px; }
.fun-rev { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: #2c6e52; }