html:root{
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500; --c5:#d55181; --c6:#9085e9;
  --граф-сетка:color-mix(in oklab, var(--fg) 8%, transparent);
  --граф-дорожка:color-mix(in oklab, var(--fg) 10%, transparent);
}
@media (prefers-color-scheme: light){
  html:root:not([data-theme="dark"]){
    --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100; --c5:#e87ba4; --c6:#6250d6;
  }
}
html:root[data-theme="light"]{
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100; --c5:#e87ba4; --c6:#6250d6;
}

.граф{margin:4px 0 0; min-width:0}
.граф + .граф{margin-top:14px}
.граф-ключ{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:12px; color:var(--fg-2)}
.граф-ключ b{color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums}
.граф-ключ small{margin-left:4px; color:var(--fg-3); font-size:11px}
.граф-кв{display:inline-block; width:10px; height:10px; margin-right:6px; border-radius:3px;
  vertical-align:-1px; background:var(--граф-цвет, var(--acc))}
.граф-кв.слабый{background:color-mix(in oklab, var(--граф-цвет, var(--acc)) 28%, transparent)}
.граф-линия-кл{display:inline-block; width:14px; height:2px; margin-right:6px; border-radius:2px; vertical-align:3px}


.граф-поле{position:relative; margin-left:44px}
.граф-сетка{position:absolute; inset:0; pointer-events:none}
.граф-сетка i{position:absolute; left:0; right:0; height:0; border-top:1px solid var(--граф-сетка)}
.граф-сетка i:first-child{border-top-color:var(--line-2)}
.граф-сетка em{position:absolute; right:calc(100% + 8px); top:-7px; font:500 10.5px/1 var(--font);
  font-style:normal; color:var(--fg-3); white-space:nowrap; font-variant-numeric:tabular-nums}

.граф-ряд{position:absolute; inset:0; display:flex; align-items:flex-end; gap:2px}
.граф-ст{position:relative; flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; outline:none; cursor:default}
.граф-ст b{position:relative; display:flex; align-items:flex-end; width:100%; max-width:24px;
  border-radius:4px 4px 0 0; background:color-mix(in oklab, var(--граф-цвет, var(--acc)) 28%, transparent);
  transition:filter 140ms}

.граф-ст b:not(:has(u)){background:var(--граф-цвет, var(--acc))}
.граф-ст b u{display:block; width:100%; border-radius:4px 4px 0 0; background:var(--граф-цвет, var(--acc));
  text-decoration:none}
.граф-ст.минус b, .граф-ст.минус b u{background:var(--neg)}
.граф-ст:hover b, .граф-ст:focus-visible b{filter:brightness(1.2)}
.граф-ст b em{position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  font:600 11px/1 var(--font); font-style:normal; color:var(--fg); white-space:nowrap}
.граф-ст span{position:absolute; top:calc(100% + 6px); font-size:10px; color:var(--fg-3); white-space:nowrap}
.граф-столбики{padding-bottom:22px}
.граф-столбики .граф-ключ{margin-top:26px}
.граф-столбики:has(.граф-ключ){padding-bottom:0}

.граф-линия svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; cursor:crosshair}
.граф-крест{stroke:var(--fg-3); stroke-width:1; opacity:0}
svg.наведён .граф-крест{opacity:1}
.граф-ось{position:relative; height:18px; margin:6px 0 0 44px}
.граф-ось span{position:absolute; transform:translateX(-50%); font-size:10px; color:var(--fg-3); white-space:nowrap}
.граф-ось span:first-child{transform:none}
.граф-ось span:last-child{transform:translateX(-100%)}


.граф-спарк{display:block; width:100%; height:28px; margin-top:10px}
.граф-дельта{display:block; margin-top:6px; font-size:12px; font-weight:600; color:var(--fg-3)}
.граф-дельта small{font-weight:400; font-size:11px; color:var(--fg-3); margin-left:4px}
.граф-дельта.лучше{color:var(--pos)}
.граф-дельта.хуже{color:var(--neg)}


.граф-полосы, .граф-воронка{display:grid; gap:9px}
.граф-полоса, .граф-шаг{display:grid; grid-template-columns:minmax(90px, 32%) 1fr auto; align-items:center; gap:10px}
.граф-имя{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--fg)}
.граф-имя em{margin-left:6px; font-style:normal; font-size:11.5px; color:var(--fg-3)}
.граф-дорожка{position:relative; display:block; height:10px; border-radius:5px; background:var(--граф-дорожка); overflow:hidden}
.граф-дорожка i{position:absolute; left:0; top:0; bottom:0; display:block; border-radius:5px; background:var(--acc)}
.граф-дорожка i u{position:absolute; left:0; top:0; bottom:0; display:block; border-radius:5px;
  background:var(--fg); opacity:.35; text-decoration:none}
.граф-полоса b, .граф-шаг b, .граф-метр b{font-size:13px; font-weight:600; color:var(--fg); white-space:nowrap;
  font-variant-numeric:tabular-nums; text-align:right; min-width:52px}
.граф-полоса b small, .граф-шаг b small{margin-left:6px; font-weight:400; font-size:11.5px; color:var(--fg-3)}
.граф-полоса:hover .граф-дорожка i, .граф-шаг:hover .граф-дорожка i{filter:brightness(1.18)}
.граф-шаг .граф-дорожка{height:16px; border-radius:6px}
.граф-шаг .граф-дорожка i{border-radius:6px}
.граф-ушли{display:block; margin:-4px 0 -4px calc(min(32%, 999px) + 10px); font-size:11px; color:var(--neg)}

.граф-метр{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:8px}
.граф-метр > span:first-child{font-size:12.5px; color:var(--fg-2)}
.граф-метр .граф-дорожка{height:8px}
.граф-метр .граф-дорожка i{background:var(--pos)}
.граф-метр.тревога .граф-дорожка i{background:var(--warn)}
.граф-метр.плохо .граф-дорожка i{background:var(--neg)}
.граф-метр.плохо b{color:var(--neg)}


.граф-доли-полоса{display:flex; gap:2px; height:14px; border-radius:7px; overflow:hidden; background:var(--граф-дорожка)}
.граф-доли-полоса i{display:block; min-width:3px; transition:filter 140ms}
.граф-доли-полоса i:hover{filter:brightness(1.2)}


.граф-тепло-сетка{display:grid; grid-template-columns:auto repeat(var(--столбцов), minmax(10px, 1fr)); gap:2px;
  align-items:center; overflow-x:auto}
.граф-тепло-сетка > span{padding-right:8px; font-size:11px; color:var(--fg-3); white-space:nowrap}
.граф-тепло-сетка > em{font-size:10px; font-style:normal; color:var(--fg-3); white-space:nowrap}
.граф-тепло-сетка > i{display:block; height:18px; border-radius:3px;
  background:color-mix(in oklab, var(--acc) calc(var(--сила) * 100%), var(--panel-2))}
.граф-тепло-сетка > i:hover{outline:1px solid var(--fg-2)}
.граф-тепло-шкала{display:inline-block; width:80px; height:8px; border-radius:4px; vertical-align:middle;
  background:linear-gradient(90deg, var(--panel-2), var(--acc))}


.граф-подсказка{position:fixed; z-index:1000; max-width:280px; padding:7px 10px; border-radius:8px;
  background:var(--fg); color:var(--bg); font-size:12px; line-height:1.4; pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.28)}
.граф-подсказка[hidden]{display:none}
.граф-подсказка-заг{margin-bottom:3px; opacity:.7}
.граф-подсказка div i{display:inline-block; width:12px; height:2px; margin-right:6px; vertical-align:3px; border-radius:2px}
.граф-подсказка b{font-weight:700}

@media (max-width:640px){
  .граф-полоса, .граф-шаг{grid-template-columns:minmax(70px, 34%) 1fr auto; gap:8px}
  .граф-поле, .граф-ось{margin-left:36px}
}


.граф-яч{display:inline-grid; justify-items:end; gap:4px; min-width:64px; width:100%; vertical-align:middle}
.граф-яч b{font-weight:600; font-variant-numeric:tabular-nums}
.граф-яч i{display:block; width:100%; height:4px; border-radius:2px; background:var(--граф-дорожка); overflow:hidden}
.граф-яч u{display:block; height:100%; border-radius:2px; background:var(--acc); text-decoration:none; margin-left:auto}
.граф-яч.pos u{background:var(--pos)}
.граф-яч.neg u{background:var(--neg)}
.граф-яч.warn u{background:var(--warn)}
.граф-путь{display:grid; gap:4px; min-width:150px}
td:has(> .граф-путь){width:42%}
td:has(> .граф-яч){width:120px}
.граф-путь > i{position:relative; display:block; height:12px; min-width:2px}
.граф-путь > i > s, .граф-путь > i > u{position:absolute; left:0; top:0; bottom:0; display:block; border-radius:3px;
  text-decoration:none}
.граф-путь > i > s{right:0; opacity:.45}
.граф-путь small{font-size:11px; color:var(--fg-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.граф-стрелка{color:var(--fg-3)}


.tile.tile .граф{margin-top:12px}
.tile.tile .граф b{display:inline; font:600 12.5px/1.3 var(--font); letter-spacing:0}
.tile.tile .граф span{margin-bottom:0}
.tile.tile .граф-ключ{margin-top:8px; gap:4px 12px}
.tile.tile .граф-ключ span{display:inline; font-size:11.5px; color:var(--fg-2)}
.tile.tile .граф-ключ b{font-size:11.5px}
.tile.tile .граф-полосы{gap:7px}
.tile.tile .граф-полоса{grid-template-columns:minmax(80px, 38%) 1fr auto; gap:8px}
.tile.tile .граф-полоса > .граф-имя{display:block; font-size:12.5px; color:var(--fg)}
.tile.tile .граф-имя em{display:inline; margin:0 0 0 6px; font-size:11px}
.tile.tile .граф-дорожка{display:block; height:8px}
.tile.tile .граф-доли-полоса{height:10px}
.tile.tile .граф-спарк{margin-top:12px}


#funnel.funnel{display:grid; gap:4px}
.воронка-шаг{display:grid; grid-template-columns:150px 1fr 70px; align-items:center; gap:12px}
.воронка-шаг > span:first-child{font-size:13px; color:var(--fg)}
.воронка-шаг .граф-дорожка{height:16px; border-radius:6px}
.воронка-шаг .граф-дорожка i{border-radius:6px}
.воронка-шаг b{text-align:right; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
.воронка-переход{margin-left:162px; padding:2px 0 4px; font-size:12px; color:var(--fg-3)}
.воронка-переход i{font-style:normal; font-weight:700; color:var(--fg)}
.воронка-переход u{text-decoration:none}
.воронка-переход.плохо i, .воронка-переход.плохо u{color:var(--neg)}
.воронка-переход.хорошо i{color:var(--pos)}
@media (max-width:640px){
  .воронка-шаг{grid-template-columns:110px 1fr 56px; gap:8px}
  .воронка-переход{margin-left:118px}
}
.заказы-доли{margin:0 0 14px}
.crm-состав{margin:4px 0 16px}
.crm-состав h3{margin:10px 0 6px; font-size:12px; font-weight:600; color:var(--fg-3)}
.crm-segcard .граф-метр{margin:8px 0}
.tile.tile .граф-метр{margin-top:12px}
.tile.tile .граф-метр b{display:inline; font:600 12px/1.3 var(--font); letter-spacing:0; min-width:0}
.tile.tile .граф-метр > span{display:block; margin:0; font-size:11.5px}
.tile.tile .граф-метр .граф-дорожка{display:block}
.граф-доп{display:grid; gap:2px; min-width:120px; max-width:220px; margin-top:4px}
.граф-доп i, .граф-доп u{display:block; height:5px; border-radius:3px; min-width:2px}
.граф-доп i{background:var(--fg-3); opacity:.6}
.граф-доп u{text-decoration:none; background:var(--pos)}
.граф-доп u.neg{background:var(--neg)}
.граф-доп small{font-size:11px; color:var(--fg-3); font-variant-numeric:tabular-nums}


#chart .bar i{position:relative; overflow:visible}
#chart .bar s.было{position:absolute; left:-2px; right:-2px; height:0; border-top:2px solid var(--fg);
  opacity:.55; pointer-events:none; transform:translateY(1px)}
.chart-ключ{margin-top:8px; font-size:12px; color:var(--fg-3)}
.chart-ключ s{display:inline-block; width:14px; height:0; margin-right:6px; border-top:2px solid var(--fg);
  opacity:.55; vertical-align:middle}


.pult-tabs .клавиши{display:none}
@media (min-width:1000px) and (hover:hover){
  #body > .pult-tabs .клавиши{display:block; margin:14px 12px 0; font-size:11px; line-height:1.7; color:var(--fg-3)}
  .клавиши kbd{display:inline-block; min-width:16px; padding:0 4px; border:1px solid var(--line-2); border-radius:4px;
    font:500 10.5px/16px var(--mono); text-align:center; color:var(--fg-2)}
}
.долг-доли{margin:0 0 12px}