/* Компоненты: карточки с двойной кромкой, пилюли, таблицы, стат-плитки, воронка, таймлайн, лента */
.shell{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:6px;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.core{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),#0d1017;border-radius:calc(var(--r-xl) - 6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding:22px}
.core.tight{padding:0;overflow:hidden}
.core-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px}
.core-head h2{font-size:15px}
.stack{display:grid;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.span-8{grid-column:span 8}.span-4{grid-column:span 4}.span-12{grid-column:span 12}
@media (max-width:1000px){.grid-2,.grid-bento{grid-template-columns:1fr}.span-8,.span-4,.span-12{grid-column:span 1}}

.pill{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.pill-ok{color:#8ff0cf;border-color:rgba(45,212,167,.3);background:rgba(45,212,167,.08)}
.pill-warn{color:#ffd58a;border-color:rgba(245,185,79,.3);background:rgba(245,185,79,.08)}
.pill-bad{color:#ffa3ad;border-color:rgba(255,107,122,.3);background:rgba(255,107,122,.08)}
.pill-accent{color:#b9c7ff;border-color:rgba(109,140,255,.3);background:rgba(109,140,255,.1)}

.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-weight:600;text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .4s var(--ease)}.tbl tbody tr:hover{background:rgba(255,255,255,.03)}
.tbl .r{text-align:right}.tbl td.r{font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
.empty{padding:38px 22px;text-align:center;color:var(--ink-3)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line);transition:transform .5s var(--ease),border-color .5s var(--ease)}
.stat:hover{transform:translateY(-2px);border-color:var(--line-2)}
.stat span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);font-weight:600}
.stat b{display:block;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.stat small{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}
.stat.hi{background:linear-gradient(135deg,rgba(109,140,255,.16),rgba(139,109,255,.08));border-color:rgba(109,140,255,.3)}
.stat.ok{background:linear-gradient(135deg,rgba(45,212,167,.14),rgba(45,212,167,.04));border-color:rgba(45,212,167,.28)}

/* воронка: один цвет (величина), 4px скруглённый конец, конверсия шага справа */
.funnel{display:grid;gap:9px}
.frow{display:grid;grid-template-columns:150px 1fr 64px 60px;align-items:center;gap:14px}
.frow .lbl{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.bar{height:12px;border-radius:0 4px 4px 0;background:rgba(255,255,255,.055);position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#4f6fe6,#7f95ff);transform-origin:left;animation:grow 1.1s var(--ease) both}
.bar:hover i{filter:brightness(1.15)}
.frow .val{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.frow .conv{font-size:12px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:600px){.frow{grid-template-columns:96px 1fr 48px 46px;gap:8px}.frow .lbl{font-size:11.5px}}

.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.tstep{padding:12px 13px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.tstep b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-weight:600}
.tstep span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px;font-variant-numeric:tabular-nums}
.tstep.done{border-color:rgba(45,212,167,.35);background:rgba(45,212,167,.07)}
.tstep.done b{color:#8ff0cf}.tstep.done span{color:var(--ink)}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px}
.kv div{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.kv b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-weight:600;margin-bottom:4px}

.feed{display:flex;flex-direction:column}
.fe{display:grid;grid-template-columns:118px 180px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;align-items:baseline}
.fe:last-child{border-bottom:0}
.fe time{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:12px}
.fe .payload{color:var(--ink-3);font-family:var(--mono);font-size:11.5px;word-break:break-word}
@media (max-width:700px){.fe{grid-template-columns:1fr;gap:4px}}

.msg{padding:12px 16px;border-radius:14px;border:1px solid rgba(45,212,167,.35);background:rgba(45,212,167,.08);color:#d9fff2;line-height:1.55}
.msg.err{border-color:rgba(255,107,122,.4);background:rgba(255,107,122,.08);color:#ffd9dd}
.msg .mono{color:var(--ink);background:rgba(0,0,0,.35);padding:2px 7px;border-radius:7px}
.code{font-family:var(--mono);font-size:12px;color:var(--ink-2);word-break:break-all;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:14px;color:var(--ink-3);font-size:13px}
/* аналитика: графики */
.seg{display:inline-flex;padding:4px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--line);gap:2px;align-self:end}
.seg button{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);background:transparent;border:0;border-radius:999px;padding:7px 12px;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease)}
.seg button.on{background:rgba(109,140,255,.18);color:#c6d2ff}
.chart{position:relative;width:100%;height:300px}.chart-sm{height:220px}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.chart .grid line{stroke:rgba(255,255,255,.06)}.chart .axis text{fill:var(--ink-3);font-size:11px;font-family:var(--font)}
.chart .line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .area{opacity:.16}.chart .dot{r:3.5;stroke:#0d1017;stroke-width:2}
.chart .cursor{stroke:rgba(255,255,255,.18);stroke-dasharray:3 3}
.chart .vbar{rx:4;transform-box:fill-box;transform-origin:center bottom;animation:growY .9s var(--ease) both}.chart .vbar:hover{filter:brightness(1.2)}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.legend button{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer;transition:opacity .4s var(--ease)}
.legend button i{width:10px;height:10px;border-radius:3px;background:var(--c)}.legend button.off{opacity:.4}
.tip{position:fixed;z-index:30;pointer-events:none;background:rgba(13,16,23,.96);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;font-size:12.5px;min-width:170px;box-shadow:0 20px 50px -20px rgba(0,0,0,.9)}
.tip b{display:block;color:var(--ink-3);font-weight:600;font-size:11px;margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase}
.tip div{display:flex;justify-content:space-between;gap:14px;padding:2px 0}.tip i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}
.stat .delta{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:999px;margin-top:6px}
.stat .up{color:#8ff0cf;background:rgba(45,212,167,.12)}.stat .down{color:#ffa3ad;background:rgba(255,107,122,.12)}.stat .flat{color:var(--ink-3);background:var(--surface-2)}
.bd{display:grid;gap:0}.bd .row{display:grid;grid-template-columns:90px 1fr 54px 54px 54px;gap:10px;align-items:center;padding:9px 18px;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}
.bd .row:last-child{border-bottom:0}.bd .k{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bd .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.bd .h{color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em}
.funnel.compact .frow{grid-template-columns:minmax(80px,120px) 1fr 44px 40px;gap:8px}.funnel.compact .lbl{font-size:12px;overflow:hidden;text-overflow:ellipsis}