/* ══════════════════════════════════════════════════════════════════
   Страница «Аналитика» — в оформлении опубликованного сайта (v5, 24.09.2026):
   Rubik, карточки 22px с волосяной рамкой, подписи разделов JetBrains Mono
   синим капсом, переключатели-пилюли, скруглённые полосы. Токены — v5.css.
   Всё под .an — остальной кабинет не задевает.
   ══════════════════════════════════════════════════════════════════ */
.an{
  font-family:var(--v5-font); color:var(--v5-ink);
  max-width:1200px; display:flex; flex-direction:column; gap:14px;
}

/* ── карточки ── */
.an-card{background:var(--v5-card); border:1px solid var(--v5-line); border-radius:22px; padding:24px; min-width:0}
.an-win{background:var(--v5-surface); border-radius:16px}

/* ── подписи и заголовки ── */
.an-kicker{font-family:var(--v5-mono); font-size:12px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--v5-blue); margin:0}
[data-theme="dark"] .an-kicker{color:var(--v5-blue-soft)}
.an-sec{display:flex; flex-direction:column; gap:14px; margin-top:24px}
.an-sec:first-of-type{margin-top:4px}
.an-h{font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0 0 4px}
.an-note{font-size:14px; color:var(--v5-muted); margin:0; line-height:1.5}
.an-mono{font-size:12.5px; color:var(--v5-faint)}
.an-demo{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; align-self:flex-start;
  border-radius:999px; background:var(--v5-tint); color:var(--v5-blue); font-size:13.5px; font-weight:500;
}
[data-theme="dark"] .an-demo{color:var(--v5-blue-soft)}

/* ── фильтры: пилюли, как вкладки сфер на сайте ── */
.an-filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.an-seg{display:inline-flex; flex-wrap:wrap; gap:6px}
.an-seg button{
  height:38px; padding:0 14px; border-radius:999px; cursor:pointer;
  background:var(--v5-card); color:var(--v5-ink); border:1px solid var(--v5-line-2);
  font:500 14px/1 var(--v5-font); transition:background .18s var(--v5-ease), color .18s var(--v5-ease), border-color .18s var(--v5-ease);
}
.an-seg button:hover{border-color:var(--v5-ink)}
.an-seg button.on{background:var(--v5-chip-on-bg); color:var(--v5-chip-on-fg); border-color:var(--v5-chip-on-bg)}
.an-select{
  height:38px; padding:0 34px 0 14px; border-radius:999px; cursor:pointer;
  background:var(--v5-card); color:var(--v5-ink); border:1px solid var(--v5-line-2); font:500 14px/1 var(--v5-font);
}
.an-cmp{margin-left:auto}

/* ── главные цифры ── */
.an-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.an-kpi{display:flex; flex-direction:column; gap:12px}
.an-kpi .an-kicker{font-family:var(--v5-font); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--v5-muted)}
.an-num{font-size:34px; font-weight:600; letter-spacing:-.025em; line-height:1}
.an-num small{font-size:17px; font-weight:500; color:var(--v5-muted); letter-spacing:0; margin-left:4px}
.an-kpi-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:26px}
.an-delta{
  display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:999px; white-space:nowrap;
  background:var(--v5-surface); color:var(--v5-muted); font-size:13px; font-weight:500;
}
.an-delta.up{background:var(--v5-ok-bg); color:var(--v5-ok)}
.an-delta.down{background:var(--v5-bad-bg); color:var(--v5-bad)}
.an-spark{width:84px; height:26px; display:block}
.an-spark path{fill:none; stroke:var(--v5-blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.an-spark circle{fill:var(--v5-blue)}
[data-theme="dark"] .an-spark path{stroke:var(--v5-blue-soft)}
[data-theme="dark"] .an-spark circle{fill:var(--v5-blue-soft)}

/* ── раскладка ── */
.an-row{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:14px}
.an-row-3{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:14px}
.an-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px}
.an-head .an-seg button{height:34px; font-size:13.5px}

/* ── воронка ── */
.an-funnel{display:flex; flex-direction:column; gap:10px}
.an-step{display:grid; grid-template-columns:160px minmax(0,1fr) 64px; gap:12px; align-items:center}
.an-step-name{font-size:14.5px; color:var(--v5-ink)}
.an-step-bar{height:34px; background:var(--v5-surface); border-radius:10px; position:relative; overflow:hidden}
.an-step-bar i{position:absolute; inset:0 auto 0 0; border-radius:10px; background:var(--v5-blue); transition:width .5s var(--v5-ease)}
.an-step:nth-child(1) .an-step-bar i{background:var(--v5-blue-dark)}
.an-step:nth-child(2) .an-step-bar i{background:var(--v5-blue)}
.an-step:nth-child(3) .an-step-bar i{background:#5a5aff}
.an-step:nth-child(4) .an-step-bar i{background:var(--v5-blue-soft)}
.an-step-bar b{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#fff; font-weight:500; font-size:14px}
.an-step-bar b.out{left:calc(var(--w) + 10px); color:var(--v5-ink)}
.an-step-pct{font-size:13.5px; font-weight:500; color:var(--v5-muted); text-align:right}

/* ── функции MCP ── */
.an-tools{display:flex; flex-direction:column}
.an-tool{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; padding:14px 0; border-top:1px solid var(--v5-line)}
.an-tool:first-child{border-top:0; padding-top:0}
.an-tool-name{font-size:15px; font-weight:500}
.an-tool-code{font-family:var(--v5-mono); font-size:11.5px; color:var(--v5-faint)}
.an-tool-n{font-size:22px; font-weight:600; letter-spacing:-.02em; text-align:right; grid-row:span 2; align-self:center}
.an-tool-n small{display:block; font-size:12.5px; font-weight:400; color:var(--v5-faint); letter-spacing:0}
.an-tool-bar{grid-column:1/-1; height:6px; border-radius:999px; background:var(--v5-surface); display:flex; overflow:hidden}
.an-tool-bar i{background:var(--v5-blue); transition:width .5s var(--v5-ease)}
.an-tool-bar u{background:var(--v5-coral)}
.an-tool.is-transfer .an-tool-bar i{background:var(--v5-violet)}
.an-sub{font-family:var(--v5-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--v5-faint); margin:18px 0 6px}

/* ── график ── */
.an-chart{width:100%; height:auto; display:block}
.an-chart .col{fill:var(--v5-tint-3)}
.an-chart .col:hover{fill:var(--v5-blue-soft)}
.an-chart .ln{fill:none; stroke:var(--v5-blue); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.an-chart .pt{fill:var(--v5-card); stroke:var(--v5-blue); stroke-width:2.5}
[data-theme="dark"] .an-chart .ln{stroke:var(--v5-blue-soft)}
[data-theme="dark"] .an-chart .pt{stroke:var(--v5-blue-soft)}
.an-chart .ax{fill:var(--v5-faint); font-family:var(--v5-font); font-size:11px}
.an-chart .grid{stroke:var(--v5-line)}
.an-legend{display:flex; flex-wrap:wrap; gap:16px; font-size:13.5px; color:var(--v5-muted)}
.an-legend span{display:inline-flex; align-items:center; gap:8px}
.an-legend span::before{content:""; width:9px; height:9px; border-radius:999px; background:var(--m,var(--v5-blue))}

/* ── итоги ── */
.an-stack{display:flex; height:14px; gap:3px; margin-bottom:16px; border-radius:999px; overflow:hidden}
.an-stack i{display:block; min-width:4px}
.an-list{display:flex; flex-direction:column}
.an-li{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--v5-line); font-size:14.5px}
.an-li:first-child{border-top:0}
.an-li::before{content:""; width:9px; height:9px; border-radius:999px; background:var(--m,var(--v5-blue)); flex:none}
.an-li.plain::before{display:none}
.an-li span{flex:1; min-width:0}
.an-li b{font-weight:600}
.an-li em{font-style:normal; font-size:13px; color:var(--v5-faint); width:50px; text-align:right}

/* ── когда отвечают ── */
.an-heat{display:grid; grid-template-columns:34px repeat(13,minmax(0,1fr)); gap:4px; align-items:center}
.an-heat .h{font-size:11.5px; color:var(--v5-faint); text-align:center}
.an-heat .d{font-size:12.5px; color:var(--v5-muted)}
.an-heat i{display:block; height:26px; border-radius:7px; background:var(--v5-blue)}
[data-theme="dark"] .an-heat i{background:#5a5aff}
.an-scale{display:flex; align-items:center; gap:6px; margin-top:14px; font-size:12.5px; color:var(--v5-faint)}
.an-scale i{width:16px; height:16px; border-radius:5px; background:var(--v5-blue)}

/* ── агенты ── */
.an-table{width:100%; border-collapse:collapse; font-size:14.5px}
.an-table th{font-size:13px; font-weight:500; color:var(--v5-faint); text-align:right; padding:0 10px 12px; white-space:nowrap}
.an-table th:first-child,.an-table td:first-child{text-align:left; padding-left:0}
.an-table td{padding:13px 10px; border-top:1px solid var(--v5-line); text-align:right; white-space:nowrap}
.an-table td:first-child{white-space:normal}
.an-agent{font-weight:500}
.an-agent small{display:block; font-size:12.5px; font-weight:400; color:var(--v5-faint); margin-top:2px}
.an-conv{display:inline-flex; align-items:center; gap:8px}
.an-conv i{width:48px; height:6px; border-radius:999px; background:var(--v5-surface); position:relative; overflow:hidden}
.an-conv i b{position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--v5-blue)}

/* ── время и нагрузка ── */
.an-money{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.an-money > div{padding:18px; display:flex; flex-direction:column; gap:10px}
.an-money .an-kicker{font-family:var(--v5-font); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--v5-muted)}
.an-money .an-num{font-size:28px}

.an-empty{padding:28px; text-align:center; color:var(--v5-muted); font-size:14.5px}

@media (max-width:1000px){
  .an-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an-row,.an-row-3{grid-template-columns:minmax(0,1fr)}
  .an-money{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .an-card{padding:18px; border-radius:18px}
  .an-step{grid-template-columns:110px minmax(0,1fr) 52px}
  .an-cmp{margin-left:0}
  .an-table-wrap{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  .an *{transition:none !important}
}