:root {
  --bi-c0: #4f7cff; --bi-c1: #f5a524; --bi-c2: #12a66b; --bi-c3: #d9578a; --bi-c4: #8b6cf0;
  --bi-c5: #1fa8c9; --bi-c6: #ef7b45; --bi-c7: #7a8794; --bi-c8: #9db52a; --bi-c9: #b84a4a;
  --bi-warn: #f5c542; --bi-orange: #ef7b45;
}
:root[data-theme='dark'] {
  --bi-c0: #7a9cff; --bi-c1: #ffb84d; --bi-c2: #2fd08c; --bi-c3: #f07aa8; --bi-c4: #a590ff;
  --bi-c5: #4cc4e3; --bi-c6: #ff9560; --bi-c7: #9aa6b2; --bi-c8: #b9cf4c; --bi-c9: #e07070;
}
html.bi-lock, html.bi-lock body { overflow: hidden; }

.bi-root { display: flex; flex-direction: column; gap: var(--i12); min-width: 0; }
.bi-head { display: flex; align-items: center; justify-content: space-between; padding: var(--i4) var(--i4) 0; }
.bi-title { display: flex; flex-direction: column; gap: var(--i2); }
.bi-fresh { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8); padding: 0 var(--i4); }
.bi-why { padding: 0 var(--i8); line-height: 1.35; }
.bi-chips { margin: 0 calc(var(--i12) * -1); padding: 0 var(--i12); }
.selector.na { opacity: 0.55; }
.selector { min-height: 36px; }

.bi-filterbar { display: flex; align-items: center; gap: var(--i8); background: var(--bg-content); border-radius: var(--r-row); padding: var(--i8) var(--i8) var(--i8) var(--i12); }
.bi-fchips { display: flex; flex-wrap: wrap; gap: var(--i6, 6px); flex: 1; min-width: 0; }
.bi-fchip { padding: 6px var(--i12); min-height: 32px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; text-align: left; max-width: 100%; }
.bi-fchip.g { background: var(--btn-secondary-bg); }
:root[data-theme='dark'] .bi-fchip.g { background: var(--bg-primary); }
.bi-fchip.x { background: var(--main); color: #36343d; }
.bi-rowsbar { display: flex; align-items: center; gap: var(--i12); padding: 0 var(--i4); }

.bi-kpis { display: flex; gap: var(--i8); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--i12) * -1); padding: 0 var(--i12) var(--i4); scrollbar-width: none; }
.bi-kpis::-webkit-scrollbar { display: none; }
.bi-kpi { flex: 0 0 176px; scroll-snap-align: start; background: var(--bg-content); border-radius: var(--r-row); padding: var(--i12); display: flex; flex-direction: column; gap: var(--i6, 6px); min-width: 0; }
.bi-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--i4); }
.bi-kpi-val { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-deltas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--i4); }
.bi-kpi-why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; margin-top: auto; }
.bi-i { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--text-tertiary); color: var(--text-secondary); font-size: 12px; font-weight: 700; font-style: italic; display: grid; place-items: center; }
.bi-i:focus-visible, .bi-opt:focus-visible, .bi-rank-main:focus-visible, .bi-lg:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; }

.bi-card { padding: var(--i16); gap: var(--i12); }
.bi-card .card-head { padding: 0; align-items: flex-start; }
.bi-head-text { display: flex; flex-direction: column; gap: var(--i4); min-width: 0; }
.bi-head-text .t-desc { line-height: 1.3; }
.bi-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8); }
.bi-seg { display: inline-flex; background: var(--btn-secondary-bg); border-radius: var(--r-pill); padding: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
:root[data-theme='dark'] .bi-seg { background: var(--bg-primary); }
.bi-seg-b { padding: 6px 12px; min-height: 32px; border-radius: var(--r-pill); font-size: 13px; white-space: nowrap; color: var(--text-secondary); }
.bi-seg-b[aria-pressed='true'] { background: var(--btn-black-bg); color: var(--btn-black-text); font-weight: 500; }
.bi-note { padding: 0 var(--i4); line-height: 1.35; }
.bi-empty { padding: var(--i16) var(--i4); text-align: center; }
.bi-actions { display: flex; flex-wrap: wrap; gap: var(--i8); }
.bi-actions .btn { width: auto; }

.bi-chartbox { display: flex; flex-direction: column; gap: var(--i4); }
.bi-chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.bi-ax { fill: var(--text-tertiary); font-size: 10px; }
.bi-axis { stroke: var(--strokes-primary); stroke-width: 1; }
.bi-area { fill: color-mix(in srgb, var(--main) 35%, transparent); }
.bi-line { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linejoin: round; }
.bi-dot { fill: var(--main); stroke: var(--text-primary); stroke-width: 1.5; }
.bi-readout { min-height: 32px; padding: 0 var(--i4); line-height: 1.35; }
.bi-legend { display: flex; flex-wrap: wrap; gap: var(--i6, 6px); }
.bi-lg { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 32px; border-radius: var(--r-pill); background: var(--btn-secondary-bg); font-size: 12px; }
:root[data-theme='dark'] .bi-lg { background: var(--bg-primary); }
.bi-lg i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.bi-lg.sel { outline: 2px solid var(--text-primary); outline-offset: -2px; }

.bi-ranked { display: flex; flex-direction: column; gap: var(--i4); }
.bi-rank { display: flex; align-items: stretch; border-radius: 12px; }
.bi-rank.sel { background: var(--main-bg); }
.bi-rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: var(--i8); text-align: left; border-radius: 12px; }
.bi-rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--i12); }
.bi-rank-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bi-rank-val { white-space: nowrap; flex-shrink: 0; }
.bi-linkrow { width: 100%; text-align: left; }
.bi-hbar { width: 100%; height: 8px; display: block; }
.bi-hbar.tall { height: 18px; }
.bi-track { fill: var(--strokes-primary); }
.bi-rank-open { width: 44px; flex-shrink: 0; font-size: 22px; color: var(--text-secondary); border-radius: 12px; }
.bi-badges { display: flex; flex-wrap: wrap; gap: var(--i4); }
.bi-nested { margin-left: var(--i12); padding-left: var(--i8); border-left: 2px solid var(--strokes-primary); display: flex; flex-direction: column; gap: var(--i8); }

.bi-funnel { display: flex; flex-direction: column; }
.bi-fstep { display: flex; flex-direction: column; gap: 6px; padding: var(--i8); text-align: left; border-radius: 12px; width: 100%; }
.bi-fstep.sel { background: var(--main-bg); }
.bi-conv { padding: 2px var(--i8); }
.bi-conv.bad, .bad { color: var(--error); }

.bi-table { display: flex; flex-direction: column; gap: 2px; }
.bi-tr { display: grid; grid-template-columns: 1.7fr 0.9fr 0.8fr 0.9fr 0.8fr; gap: var(--i4); align-items: center; padding: 10px var(--i8); border-radius: 10px; text-align: left; width: 100%; min-height: 40px; }
button.bi-tr:active, .bi-tr.sel { background: var(--main-bg); }
.bi-tr.head { min-height: 28px; padding-top: 4px; padding-bottom: 4px; }
.bi-tr.flag { box-shadow: inset 3px 0 0 var(--error); }
.bi-flag { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--error); margin-right: 4px; }
.bi-honest { background: var(--main-bg); }
:root[data-theme='dark'] .bi-honest { background: var(--bg-content); border: 1px solid var(--main); }

.bi-call { align-items: flex-start; }
.bi-call .row-text { gap: var(--i4); }
.bi-ok { display: flex; align-items: center; gap: var(--i8); padding: var(--i4); flex-wrap: wrap; }
.bi-oprow .row-text { min-width: 0; }
.bi-oprow .t-desc { overflow: hidden; text-overflow: ellipsis; }
.bi-skel-wrap { display: flex; flex-direction: column; gap: var(--i12); }

.bi-backdrop { position: fixed; inset: 0; background: var(--bg-foreground); z-index: 25; opacity: 0; transition: opacity 0.2s ease; }
.bi-backdrop.open { opacity: 1; }
.bi-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 26; max-height: 88vh; overflow-y: auto; background: var(--bg-primary); border-radius: var(--r-card) var(--r-card) 0 0; padding: var(--i8) var(--i12) calc(var(--i24) + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; gap: var(--i12); max-width: 480px; margin: 0 auto; }
.bi-sheet.open { transform: none; }
.bi-sheet .card { background: none; padding: 0; }
.bi-pass .proof-sec { padding: 0 var(--i8); }
.bi-pick { display: flex; flex-direction: column; gap: 2px; }
.bi-opt { display: flex; align-items: center; gap: var(--i12); min-height: 48px; padding: var(--i8) var(--i12); border-radius: var(--r-row); background: var(--bg-content); text-align: left; justify-content: flex-start; }
.bi-opt .t-desc { margin-left: auto; }
.bi-check { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--text-tertiary); display: grid; place-items: center; flex-shrink: 0; }
.bi-check svg { width: 16px; height: 16px; }
.bi-opt[aria-pressed='true'] .bi-check { background: var(--main); border-color: var(--main); color: #36343d; }
.bi-sheet-actions { display: flex; gap: var(--i8); }
.bi-sheet-actions .btn { flex: 1; }
.bi-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--i8); }
.bi-bm { padding-right: var(--i4); }
.bi-bm-open { flex: 1; display: flex; flex-direction: column; gap: var(--i2); text-align: left; min-width: 0; }

.bi-page { position: fixed; inset: 0; z-index: 15; background: var(--bg-primary); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 0.22s ease; }
.bi-page.open { transform: none; }
.bi-page.bi-under { visibility: hidden; }
.bi-page-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--i12); padding: var(--i12); background: var(--bg-primary); max-width: 480px; margin: 0 auto; }
.bi-page-title { display: flex; flex-direction: column; gap: var(--i2); min-width: 0; }
.bi-page-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-page-body { max-width: 480px; margin: 0 auto; padding: 0 var(--i12) calc(var(--i32) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--i12); }
.bi-wm { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.bi-wm span { position: absolute; white-space: nowrap; font-size: 11px; color: var(--text-primary); opacity: 0.06; transform: rotate(-22deg); }
.bi-wm-line { text-align: center; padding: var(--i8) 0; }

.bi-ident { display: flex; align-items: center; gap: var(--i12); }
.bi-tags { display: flex; flex-wrap: wrap; gap: var(--i6, 6px); }
.bi-kvs { display: flex; flex-direction: column; }
.bi-kv { display: flex; justify-content: space-between; gap: var(--i12); padding: var(--i8) 0; border-bottom: 1px solid var(--strokes-primary); }
.bi-kv:last-child { border-bottom: 0; }
.bi-kv .t-title { text-align: right; }
.bi-kv.bad .t-title { color: var(--error); }
.bi-group { display: flex; flex-direction: column; gap: var(--i4); }
.bi-group > p { padding: var(--i8) var(--i8) 0; }

.bi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bi-step { display: flex; gap: var(--i12); position: relative; padding-bottom: var(--i16); }
.bi-step:last-child { padding-bottom: 0; }
.bi-step::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--strokes-primary); }
.bi-step:last-child::before { display: none; }
.bi-dot-s { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; border: 2px solid var(--text-tertiary); background: var(--bg-content); z-index: 1; }
.bi-step.done .bi-dot-s { background: var(--success); border-color: var(--success); }
.bi-step.wait .bi-dot-s { background: var(--warning); border-color: var(--warning); }
.bi-step.bad .bi-dot-s, .bi-step.stuck .bi-dot-s { background: var(--error); border-color: var(--error); }
.bi-step.none .bi-dot-s { border-style: dashed; }
.bi-step-body { display: flex; flex-direction: column; gap: var(--i4); min-width: 0; flex: 1; }
.bi-step-top { display: flex; justify-content: space-between; gap: var(--i8); align-items: baseline; }
.bi-step-top .t-desc { white-space: nowrap; }
.bi-gap { padding-top: 2px; }
.bi-stuck { display: flex; flex-direction: column; gap: 2px; background: var(--error-bg); border-radius: var(--r-row); padding: var(--i8) var(--i12); margin-top: var(--i4); font-size: 13px; line-height: 1.3; }
.bi-step.stuck .t-title { color: var(--error); }

.bi-pagetabs { gap: var(--i24); }
.bi-chips .selector { background: var(--bg-content); }
:root[data-theme='dark'] .bi-chips .selector:not([aria-pressed='true']) { background: var(--bg-content); }
.bi-chips .selector[aria-pressed='true'] { background: var(--btn-black-bg); }
.bi-chart rect { cursor: pointer; }

/* ===== роли W2: живые панели, таблицы, широкая раскладка ===== */
.bi-grid { display: flex; flex-direction: column; gap: var(--i12); min-width: 0; }
.bi-grid > * { min-width: 0; }
.bi-sticky { display: flex; flex-direction: column; gap: var(--i12); min-width: 0; }
.bi-live { display: flex; flex-direction: column; gap: var(--i12); min-width: 0; }
.bi-err { display: flex; align-items: center; justify-content: space-between; gap: var(--i12); padding: var(--i12); border-radius: var(--r-row); background: var(--error-bg); }
.bi-link { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; min-height: 24px; padding: 0 var(--i2); }
.bi-link:focus-visible, .bi-th:focus-visible, .bi-tbl tr.tap:focus-visible, .bi-kpi.tap:focus-visible, .bi-defect:focus-visible { outline: 2px solid var(--text-secondary); outline-offset: 2px; }
.good { color: var(--success); }
.bi-kpi.tap { cursor: pointer; text-align: left; }
.bi-kpi.on { box-shadow: inset 0 0 0 2px var(--text-primary); }
.bi-defect-box { display: block; }
.bi-defect { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--i4) var(--i8); padding: var(--i12) var(--i16); border-radius: var(--r-row); text-align: left; font-size: 14px; }
.bi-defect.crit { background: var(--error-bg); box-shadow: inset 4px 0 0 var(--error); }
.bi-defect.ok { background: var(--success-bg); box-shadow: inset 4px 0 0 var(--success); }
.bi-defect[aria-pressed='true'] { outline: 2px solid var(--text-primary); outline-offset: -2px; }
.bi-defect .t-desc { flex-basis: 100%; color: var(--text-secondary); }
.bi-subhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--i8); padding-top: var(--i8); }
.bi-decomp { display: flex; flex-direction: column; gap: var(--i8); }
.bi-dc { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(60px, 2fr) auto; gap: var(--i12); align-items: center; padding: var(--i4) var(--i8); border-radius: 10px; }
.bi-dc.bad { background: var(--error-bg); }
.bi-dcbar { height: 10px; border-radius: 5px; background: var(--strokes-primary); overflow: hidden; display: block; }
.bi-dcbar i { display: block; height: 100%; border-radius: 5px; }
.bi-dcbar i.pos { background: var(--success); }
.bi-dcbar i.neg { background: var(--error); }
.bi-dcval { text-align: right; white-space: nowrap; }
.bi-sharebar { display: inline-flex; align-items: center; gap: var(--i8); justify-content: flex-end; }
.bi-sharebar i { display: inline-block; height: 6px; min-width: 2px; max-width: 80px; border-radius: 3px; background: var(--bi-c0); }
.bi-tips { margin: 0; padding: 0 var(--i8) 0 var(--i24); display: flex; flex-direction: column; gap: var(--i8); font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.bi-search { display: flex; gap: var(--i8); align-items: stretch; }
.bi-searchbox { flex: 1; min-width: 0; font-size: 16px; }
.bi-searchgo { width: auto; flex-shrink: 0; }
.bi-arrow { margin-left: 4px; }

.bi-tblwrap { display: flex; flex-direction: column; gap: var(--i8); min-width: 0; }
.bi-tblscroll { overflow-x: auto; min-width: 0; }
.bi-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.bi-tbl th { text-align: left; font-weight: 500; color: var(--text-secondary); font-size: 12px; border-bottom: 1px solid var(--strokes-primary); padding: 0; white-space: nowrap; }
.bi-tbl th.num, .bi-tbl td.num { text-align: right; }
.bi-th { width: 100%; min-height: 32px; padding: 4px var(--i8); text-align: inherit; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.bi-tbl td { padding: 9px var(--i8); border-bottom: 1px solid var(--strokes-primary); vertical-align: middle; font-variant-numeric: tabular-nums; }
.bi-tbl tr.tap { cursor: pointer; }
.bi-tbl tr.tap:hover td { background: var(--main-bg); }
.bi-tbl tr.sel td { background: var(--main-bg); }
.bi-tbl tr.flag td:first-child { box-shadow: inset 3px 0 0 var(--error); }
.bi-tbl td.bad { color: var(--error); }
.bi-tbl td.good { color: var(--success); }
.bi-more { align-self: flex-start; }
.bi-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i6, 6px); }

@media (max-width: 899px) {
  .bi-tbl thead { display: none; }
  .bi-tbl, .bi-tbl tbody { display: block; }
  .bi-tbl tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--i12); padding: 10px var(--i12); margin-bottom: var(--i4); border-radius: 12px; background: var(--bg-secondary); }
  :root[data-theme='dark'] .bi-tbl tr { background: var(--bg-primary); }
  .bi-tbl td { display: inline-flex; gap: 4px; align-items: baseline; padding: 0; border: 0; font-size: 13px; }
  .bi-tbl td::before { content: attr(data-label) ':'; color: var(--text-secondary); font-size: 12px; }
  .bi-tbl td:first-child { flex-basis: 100%; font-size: 14px; font-weight: 600; }
  .bi-tbl td:first-child::before { display: none; }
  .bi-tbl td.num { text-align: left; }
  .bi-tbl tr.sel, .bi-tbl tr.tap:active { background: var(--main-bg); }
  .bi-tbl tr.flag { box-shadow: inset 3px 0 0 var(--error); }
  .bi-tbl tr.tap:hover td, .bi-tbl tr.sel td { background: none; }
  .bi-tbl tr.flag td:first-child { box-shadow: none; }
}
@media (min-width: 900px) {
  .bi-sortbar { display: none; }
}

/* ===== широкая раскладка (Telegram Desktop) ===== */
@media (min-width: 900px) {
  .app:has(> .bi-root) { max-width: 1440px; padding-left: var(--i24); padding-right: var(--i24); }
  .bi-root { gap: var(--i16); }
  .bi-head, .bi-fresh, .bi-why { padding-left: 0; padding-right: 0; }
  .bi-why { max-width: 900px; }
  .bi-sticky { position: sticky; top: 0; z-index: 6; background: var(--bg-primary); padding: var(--i8) 0; margin: 0; box-shadow: 0 1px 0 var(--strokes-primary); }
  .bi-chips { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .bi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--i16); align-items: stretch; }
  .bi-grid > .bi-kpis, .bi-grid > .span-all, .bi-grid > .bi-note, .bi-grid > .bi-empty, .bi-grid > .bi-defect-box, .bi-grid > .bi-filterbar, .bi-grid > p { grid-column: 1 / -1; }
  .bi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .bi-kpi { flex: none; }
  .bi-card { padding: var(--i16) var(--i24); }
  .bi-pagetabs { justify-content: flex-start; }
  .bi-page-body { max-width: 980px; }
  .bi-page-head { max-width: 980px; }
}
@media (min-width: 1280px) {
  .bi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bi-grid > .span-2 { grid-column: span 2; }
}
html.bi-side .app:has(> .bi-root) { margin-right: min(560px, 42vw); max-width: none; margin-left: 0; }
@media (min-width: 1280px) {
  html.bi-side .bi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.bi-side .bi-grid > .span-2 { grid-column: 1 / -1; }
}
@media (min-width: 1900px) {
  html.bi-side .bi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== боковая панель карточек (≥ 1200 px) ===== */
.bi-page.bi-sidepanel { left: auto; right: 0; width: min(560px, 42vw); border-left: 1px solid var(--strokes-primary); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); z-index: 20; transform: translateX(100%); }
.bi-page.bi-sidepanel.open { transform: none; }
.bi-sidepanel .bi-page-head, .bi-sidepanel .bi-page-body { max-width: none; margin: 0; }
.bi-sidepanel .bi-page-head { padding: var(--i16) var(--i24); border-bottom: 1px solid var(--strokes-primary); }
.bi-sidepanel .bi-page-body { padding: var(--i16) var(--i24) var(--i32); }
.bi-sidepanel .bi-wm { left: auto; width: min(560px, 42vw); }
html.bi-side body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  .bi-page, .bi-sheet { transition: none; }
}
@media (min-width: 900px) {
  .bi-chartbox { max-width: 760px; }
}