/* MODIX · раздел «Статистика» (js/app/86-stats.js). Всё под .stx, чтобы не задевать остальные экраны. */
.stx{display:flex;flex-direction:column;gap:12px;--stx-ok:var(--green);--stx-bad:var(--red);--stx-inv:var(--blue);--stx-track:var(--card-2)}
.stx .stx-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px;min-width:0}
.stx .stx-head{display:flex;align-items:center;gap:10px;min-width:0}
.stx .stx-head h3{margin:0;font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stx .stx-side{font-size:12.5px;line-height:16px;font-weight:600;color:var(--muted);white-space:nowrap;flex:none}
.stx .stx-ico{flex:none;display:block}
.stx .stx-art{background-size:300% 200%;background-repeat:no-repeat}
.stx .stx-text{margin:0;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-2)}
.stx .stx-foot{margin:0;font-size:12.5px;line-height:17px;font-weight:500;color:var(--muted)}
.stx .stx-cap{font-size:11.5px;line-height:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.stx .stx-skel{min-height:120px}

/* главное */
.stx .stx-hero{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 13%,var(--card)),var(--card) 62%);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.stx .stx-herotop{display:flex;align-items:center;gap:12px}
.stx .stx-herotxt{flex:1;min-width:0}
.stx .stx-kicker{font-size:13px;line-height:16px;font-weight:600;color:var(--ink-2)}
.stx .stx-big{font-size:44px;line-height:48px;font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stx .stx-big.sm{font-size:32px;line-height:36px}
.stx .stx-sub{font-size:13.5px;line-height:18px;font-weight:500;color:var(--ink-2)}
.stx .stx-delta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:16px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.stx .stx-delta i{font-style:normal;font-size:10px}
.stx .stx-delta.up{color:var(--green);background:var(--green-soft);border-color:transparent}
.stx .stx-delta.dn{color:var(--red);background:var(--red-soft);border-color:transparent}
.stx .stx-split{height:12px;border-radius:999px;background:var(--stx-ok);overflow:hidden;display:flex}
.stx .stx-split .bad{display:block;height:100%;background:var(--stx-bad);border-right:2px solid var(--card)}
.stx .stx-splitkeys{display:flex;justify-content:space-between;gap:12px}
.stx .stx-splitkeys div{display:flex;flex-direction:column;gap:1px;min-width:0}
.stx .stx-splitkeys div:last-child{text-align:right}
.stx .stx-splitkeys b{font-size:19px;line-height:23px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stx .stx-splitkeys b.bad{color:var(--stx-bad)} .stx .stx-splitkeys b.ok{color:var(--stx-ok)}
.stx .stx-splitkeys span{font-size:12.5px;line-height:16px;font-weight:500;color:var(--ink-2)}

/* столбики */
.stx .stx-chart{display:flex;flex-direction:column;gap:6px;min-width:0}
.stx .stx-plot{display:flex;align-items:stretch;gap:3px;height:112px;border-bottom:1px solid var(--line)}
.stx .stx-plot .col{flex:1 1 0;min-width:0;padding:0;margin:0;border:0;background:none;display:flex;flex-direction:column;border-radius:6px 6px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:none}
.stx .stx-plot .col .up{flex:1;display:flex;flex-direction:column-reverse;justify-content:flex-start;gap:1px;min-height:0;padding:0 12%}
.stx .stx-plot .col i{display:block;width:100%;border-radius:3px;flex:none}
.stx .stx-plot .col i.ok,.stx .stx-plot .col i.up{background:var(--stx-ok)}
.stx .stx-plot .col i.bad,.stx .stx-plot .col i.left{background:var(--stx-bad)}
.stx .stx-plot .col i.inv{background:var(--stx-inv)}
.stx .stx-plot .col.dim{opacity:.6}
.stx .stx-plot .col.sel{background:color-mix(in srgb,var(--accent) 14%,transparent);opacity:1}
.stx .stx-chart.hours .stx-plot{height:92px;gap:2px}
.stx .stx-chart.hours .col i.bad{background:color-mix(in srgb,var(--accent) 55%,var(--card-2))}
.stx .stx-chart.hours .col.hot i.bad{background:var(--stx-bad)}
.stx .stx-chart.flow .stx-plot{height:150px;border-bottom:0}
.stx .stx-chart.flow .col .up{flex:1 1 0;border-bottom:1px solid var(--line)}
.stx .stx-chart.flow .col .dn{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-start;padding:1px 12% 0;min-height:0}
/* переключатели раздела: четыре периода и три площадки должны помещаться в одну строку на узком телефоне */
:root[data-theme] #scroll .stx .seg button{flex-direction:row!important;white-space:nowrap;font-size:13.5px;padding:8px 4px;gap:6px;min-width:0;min-height:46px}
:root[data-theme] #scroll .stx .seg button img.official-platform-logo{width:22px!important;height:22px!important;flex:0 0 22px!important}
.stx .stx-axis{display:flex;gap:3px}
.stx .stx-chart.hours .stx-axis{gap:2px}
.stx .stx-axis span{flex:1 1 0;min-width:0;display:flex;justify-content:center;font-size:10.5px;line-height:13px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.stx .stx-axis span:first-child{justify-content:flex-start}
.stx .stx-axis span:last-child{justify-content:flex-end}
.stx .stx-tip{font-size:13px;line-height:18px;font-weight:600;color:var(--ink);min-height:18px;font-variant-numeric:tabular-nums;background:var(--card-2);border:1px solid var(--line-2);border-radius:12px;padding:8px 11px}
.stx .stx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;line-height:16px;font-weight:500;color:var(--ink-2)}
.stx .stx-legend span{display:inline-flex;align-items:center;gap:6px}
.stx .stx-legend i{width:10px;height:10px;border-radius:3px;display:block}
.stx .stx-legend i.ok,.stx .stx-legend i.up{background:var(--stx-ok)} .stx .stx-legend i.bad,.stx .stx-legend i.left{background:var(--stx-bad)} .stx .stx-legend i.inv{background:var(--stx-inv)}

/* плитки действий */
.stx .stx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stx .stx-tile{background:var(--card-2);border:1px solid var(--line-2);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stx .stx-tilehead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.stx .stx-tile .n{font-size:26px;line-height:30px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stx .stx-tile .k{font-size:14px;line-height:18px;font-weight:600;color:var(--ink)}
.stx .stx-tile .s{font-size:12px;line-height:16px;font-weight:500;color:var(--muted)}
.stx .stx-mini{font-size:11.5px;line-height:14px;font-weight:700;padding:4px 7px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.stx .stx-strip{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden}
.stx .stx-strip i{display:block;min-width:4px;flex-basis:0}
.stx .stx-kinds{display:flex;flex-direction:column;gap:7px}
.stx .stx-kinds div{display:grid;grid-template-columns:10px minmax(0,1fr) auto 44px;align-items:center;gap:9px;font-size:14px;line-height:18px}
.stx .stx-kinds i{width:10px;height:10px;border-radius:3px;display:block}
.stx .stx-kinds span{font-weight:500;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stx .stx-kinds b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.stx .stx-kinds em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.stx .stx-line{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:18px;font-weight:600;color:var(--ink-2);background:var(--gold-soft);border-radius:12px;padding:8px 11px}

/* списки: причины, чаты, люди */
.stx .stx-rows{display:flex;flex-direction:column}
.stx .stx-reason{display:flex;flex-direction:column;gap:6px;padding:9px 0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:0;width:100%}
.stx .stx-reason+.stx-reason,.stx .stx-chat+.stx-chat{border-top:1px solid var(--line-2)}
.stx .stx-reason .line{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:baseline;gap:9px}
.stx .stx-reason .t{font-size:14.5px;line-height:19px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stx .stx-reason b{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.stx .stx-reason em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.stx .bar{height:5px;border-radius:999px;background:var(--stx-track);overflow:hidden}
.stx .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.stx .bar i.neg{background:var(--stx-bad)}
.stx .stx-chat{display:grid;grid-template-columns:22px 42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:0;width:100%}
.stx .stx-chat.person{grid-template-columns:42px minmax(0,1fr) auto;cursor:default}
.stx .stx-chat .rank{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--card-2);font-variant-numeric:tabular-nums}
.stx .stx-chat .rank.r1{background:linear-gradient(145deg,#ffd76a,#f0a400);color:#4a3200}
.stx .stx-chat .rank.r2{background:linear-gradient(145deg,#e6eaf5,#b4bdd4);color:#2c3550}
.stx .stx-chat .rank.r3{background:linear-gradient(145deg,#f3c39b,#cf8650);color:#4a2708}
.stx .stx-chat>.ava{width:42px;height:42px;margin:0;flex:none}
.stx .stx-chat .body{min-width:0;display:flex;flex-direction:column;gap:3px}
.stx .stx-chat .t{font-size:14.5px;line-height:19px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stx .stx-chat .s{font-size:12.5px;line-height:16px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.stx .stx-chat .bar{height:4px;margin-top:2px}
.stx .stx-chat .v{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:54px}
.stx .stx-chat .v b{font-size:17px;line-height:21px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stx .stx-chat .v.up b{color:var(--green)} .stx .stx-chat .v.dn b{color:var(--red)}
.stx .stx-chat .v span{font-size:11px;line-height:13px;font-weight:600;color:var(--muted)}
.stx .stx-more{align-self:stretch;margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card-2);color:var(--ink);font:inherit;font-size:14px;line-height:18px;font-weight:600;cursor:pointer;box-shadow:none;min-height:0}

/* когда нарушают */
.stx .stx-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stx .stx-facts div{background:var(--card-2);border:1px solid var(--line-2);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.stx .stx-facts span{font-size:12px;line-height:15px;font-weight:600;color:var(--muted)}
.stx .stx-facts b{font-size:19px;line-height:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stx .stx-facts em{font-style:normal;font-size:12.5px;line-height:16px;font-weight:500;color:var(--ink-2)}

/* аудитория */
.stx .stx-aud{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stx .stx-net{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 9px;border-radius:16px;background:var(--card-2);border:1px solid var(--line-2);flex:none}
.stx .stx-net div{display:flex;flex-direction:column}
.stx .stx-net b{font-size:19px;line-height:22px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stx .stx-net span{font-size:11.5px;line-height:14px;font-weight:600;color:var(--muted)}
.stx .stx-net.up{background:var(--green-soft);border-color:transparent} .stx .stx-net.up b{color:var(--green)}
.stx .stx-net.dn{background:var(--red-soft);border-color:transparent} .stx .stx-net.dn b{color:var(--red)}
.stx .stx-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stx .stx-trio>div{background:var(--card-2);border:1px solid var(--line-2);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.stx .stx-trio b{font-size:19px;line-height:23px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stx .stx-trio .up b{color:var(--green)} .stx .stx-trio .dn b{color:var(--red)} .stx .stx-trio .inv b{color:var(--blue)}
.stx .stx-trio span:not(.stx-mini){font-size:12px;line-height:15px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stx .stx-trio .stx-mini{margin-top:4px}

/* площадки */
.stx .stx-plats{display:flex;flex-direction:column}
.stx .stx-plats .hd,.stx .stx-plats .rw{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));align-items:center;gap:6px}
.stx .stx-plats .hd span{font-size:11.5px;line-height:14px;font-weight:600;color:var(--muted);text-align:right;white-space:nowrap}
.stx .stx-plats .rw{padding:11px 0;margin:0;border:0;border-top:1px solid var(--line-2);border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;cursor:pointer;text-align:left;min-height:0;width:100%;-webkit-tap-highlight-color:transparent}
.stx .stx-plats .nm{display:flex;align-items:center;gap:9px;min-width:0}
.stx .stx-plats .nm img{width:26px;height:26px;flex:none}
.stx .stx-plats .nm span{display:flex;flex-direction:column;min-width:0}
.stx .stx-plats .nm b{font-size:14.5px;line-height:18px;font-weight:700;color:var(--ink)}
.stx .stx-plats .nm em{font-style:normal;font-size:12px;line-height:15px;font-weight:500;color:var(--muted);white-space:nowrap}
.stx .stx-plats .x{font-size:15px;line-height:19px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

/* окно с составом причины */
.stx-sheet{display:flex;flex-direction:column}
.stx-sheet .r{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14.5px;line-height:19px;font-weight:500;color:var(--ink)}
.stx-sheet .r+.r{border-top:1px solid var(--line-2)}
.stx-sheet .r b{font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.stx-sheet .stx-cap{font-size:11.5px;line-height:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.stx-sheet .stx-chips{display:flex;flex-wrap:wrap;gap:6px}
.stx-sheet .stx-chips span{display:inline-flex;gap:7px;align-items:baseline;padding:6px 10px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);font-size:13.5px;line-height:17px}
.stx-sheet .stx-chips b{font-weight:600;color:var(--ink)} .stx-sheet .stx-chips em{font-style:normal;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

@media(max-width:360px){
  .stx .stx-big{font-size:38px;line-height:42px}
  .stx .stx-card{padding:14px}
  .stx .stx-tile{padding:10px}
  .stx .stx-tile .k{font-size:12.5px}
  .stx .stx-trio span:not(.stx-mini){font-size:11px}
  :root[data-theme] #scroll .stx .seg button{font-size:12.5px;gap:4px}
  .stx .stx-chat{grid-template-columns:20px 38px minmax(0,1fr) auto;gap:8px}
  .stx .stx-chat>.ava{width:38px;height:38px}
}