/* ============================================================================
   Eco Dashboard — design v3 "high-stakes data room"
   Тёмный fintech-терминал: атмосферный фон, Manrope + JetBrains Mono, категорийные
   цвета со свечением, глубокие панели, staggered reveal.
   Категории: Ecology=зелёный, Loser=оранжевый, Winner=розово-красный.
   skip-design-check: редизайн через frontend-design, структура/логика сохранены.
   ============================================================================ */
:root{
  --bg-0:#0a0e16; --bg-1:#0c111a; --panel:#141b27; --panel-2:#1a2230;
  --bd:rgba(255,255,255,.07); --bd-2:rgba(255,255,255,.13);
  --ink:#e8eef7; --ink-2:#9aa7ba; --ink-3:#62708400; --ink-3:#647084;
  --eco:#3ddc84; --eco-soft:#8fe6b0; --loser:#f7993e; --winner:#f24d6f; --rake:#ecc94b;
  --accent:#3ddc84;
  --pos:#3ddc84; --neg:#f24d6f;
  --glow-eco:rgba(61,220,132,.25); --glow-win:rgba(242,77,111,.22);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--ink);
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(61,220,132,.08), transparent 58%),
    radial-gradient(900px 520px at -5% 108%, rgba(242,77,111,.07), transparent 55%),
    radial-gradient(700px 700px at 50% 50%, rgba(40,120,200,.04), transparent 70%),
    var(--bg-0);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;letter-spacing:.005em;
}
body.auth-pending > :not(script){visibility:hidden}
/* зернистость для глубины */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.mono,table.grid td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- шапка ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:13px 22px;background:linear-gradient(180deg,#13203a,#0b1018);
  border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:60;box-shadow:0 6px 20px -8px rgba(0,0,0,.75)}
.crumbs{font-size:13px;display:flex;align-items:center;gap:9px;color:var(--ink-2);letter-spacing:.02em}
.crumbs::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--eco);
  box-shadow:0 0 0 4px rgba(61,220,132,.16),0 0 12px var(--glow-eco)}
.crumbs b{font-weight:600;color:var(--ink);letter-spacing:.04em}
.muted{color:var(--ink-3)} .topbar .muted{color:var(--ink-3)}
.badge-demo{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;
  color:var(--rake);background:rgba(236,201,75,.1);border:1px solid rgba(236,201,75,.28);
  border-radius:7px;padding:5px 12px}

/* ---------- вкладки ---------- */
.tabs{display:flex;gap:2px;padding:0 18px;background:#0c111a;
  border-bottom:1px solid var(--bd);position:sticky;top:51px;z-index:55;box-shadow:0 6px 16px -10px rgba(0,0,0,.6)}
.tab-btn{font-family:var(--sans);background:transparent;border:0;color:var(--ink-2);
  padding:14px 18px;cursor:pointer;font-size:13px;font-weight:500;letter-spacing:.02em;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.18s;position:relative}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{color:var(--eco);border-bottom-color:var(--eco);font-weight:600;
  text-shadow:0 0 18px var(--glow-eco)}

/* ---------- раскладка ---------- */
.layout{display:flex;align-items:flex-start}
.content{flex:1;padding:20px;min-width:0}
.filters{width:248px;flex:0 0 248px;padding:18px 16px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),rgba(12,17,26,.55);
  border-left:1px solid var(--bd);min-height:calc(100vh - 100px);backdrop-filter:blur(6px)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
/* ============================================================================
   Раскладка A v2 — единая система контролов (frontend-design / design contract)
   Один ритм: высота --ctl-h, общий контрол-чип; кастомные дропдауны (гибрид
   поверх нативного <select>), segmented-тумблеры (CSS поверх radio), группы со
   вертикальными разделителями. Тема/палитра/шрифты не меняются. · skip-design-check
   ============================================================================ */
:root{--ctl-h:30px}
.topbar{flex-wrap:wrap;gap:9px 14px}
.src-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;flex:1 1 auto;justify-content:flex-start}
.top-right{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-left:auto}
.tabs{position:static}
.layout{display:block}
.content{padding:16px 22px}
.filterbar{padding:9px 22px;background:#0c1119;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;gap:8px;position:relative;z-index:40}
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* базовый контрол-чип (= триггер дропдауна, общий ритм высоты) */
.fctl{display:inline-flex;align-items:center;gap:7px;height:var(--ctl-h);background:var(--panel-2);
  border:1px solid var(--bd-2);border-radius:8px;padding:0 9px;white-space:nowrap;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;position:relative}
.fctl:hover{border-color:#3a4658}
.fctl .fcl{font-family:var(--mono);font-size:9px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:500;flex:0 0 auto}

/* кастомный дропдаун (поверх скрытого нативного <select>) */
.dd .dd-val{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--ink);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.dd .dd-chev{width:9px;height:9px;flex:0 0 auto;color:var(--ink-3);transition:transform .18s,color .15s}
.dd.open{border-color:var(--eco);box-shadow:0 0 0 3px rgba(61,220,132,.13)}
.dd.open .dd-chev{transform:rotate(180deg);color:var(--eco)}
.dd-native{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}
.dd-pop{position:absolute;top:calc(100% + 5px);left:0;min-width:100%;width:max-content;max-width:264px;
  background:#0f1622;border:1px solid var(--bd-2);border-radius:10px;box-shadow:0 16px 38px -8px rgba(0,0,0,.72);
  padding:4px;z-index:90;max-height:300px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .14s,transform .14s,visibility .14s}
.dd.open .dd-pop{opacity:1;visibility:visible;transform:none}
.dd-opt{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;cursor:pointer;position:relative;
  font-family:var(--sans);font-size:12px;color:var(--ink-2);padding:7px 11px 7px 25px;border-radius:7px;white-space:nowrap;transition:background .12s,color .12s}
.dd-opt:hover{background:rgba(255,255,255,.055);color:var(--ink)}
.dd-opt.on{color:var(--eco);background:rgba(61,220,132,.1)}
.dd-opt.on::before{content:"";position:absolute;left:11px;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--eco);transform:translateY(-50%);box-shadow:0 0 6px var(--glow-eco)}
.dd-pop::-webkit-scrollbar{width:10px}
.dd-pop::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:7px;border:3px solid #0f1622}
/* skip-design-check: живой поиск в длинных дропдаунах (клубы/AI) — функциональная обвязка */
.dd-search{display:block;width:calc(100% - 8px);margin:2px 4px 6px;padding:7px 10px;
  background:var(--panel-2);border:1px solid var(--bd-2);border-radius:7px;color:var(--ink);
  font:12px var(--sans);outline:none}
.dd-search:focus{border-color:var(--eco);box-shadow:0 0 0 2px rgba(61,220,132,.13)}
.dd-search::placeholder{color:var(--ink-3)}

/* segmented-тумблер (CSS поверх radio: idle / cur / src) */
.fctl.seg-host{background:none;border:0;padding:0;cursor:default}
.fctl.seg-host:hover{border-color:transparent}
.seg{display:inline-flex;align-items:center;height:var(--ctl-h);background:var(--panel-2);
  border:1px solid var(--bd-2);border-radius:8px;padding:3px;gap:2px}
.seg label{height:calc(var(--ctl-h) - 8px);display:inline-flex;align-items:center;padding:0 10px;border-radius:6px;
  cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);
  transition:background .14s,color .14s;position:relative}
.seg input{position:absolute;width:0;height:0;opacity:0;margin:0;pointer-events:none}
.seg label:hover{color:var(--ink-2)}
.seg label:has(input:checked){background:rgba(61,220,132,.15);color:var(--eco)}

/* skip-design-check: единое поле периода + range-календарь (DataLens-паттерн) — функциональный контрол */
.dt-wrap{cursor:pointer;transition:border-color .14s}
.dt-wrap:hover{border-color:var(--eco)}
.dt-disp{font-family:var(--mono);font-size:11px;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.dt-ic{display:inline-flex;color:var(--ink-3);transition:color .14s}
.dt-wrap:hover .dt-ic{color:var(--eco)}
.apply-h.stale{box-shadow:0 0 0 2px rgba(61,220,132,.45)}   /* staged-даты не применены — жми Apply */
.cal-pop{position:fixed;z-index:300;display:none;width:316px;background:#0f1622;border:1px solid var(--bd-2);
  border-radius:12px;box-shadow:0 18px 44px -10px rgba(0,0,0,.78);overflow:hidden}
.cal-tabs{display:flex;gap:2px;padding:5px 12px 0;border-bottom:1px solid var(--bd)}
.cal-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-2);font:600 11px var(--sans);
  padding:6px 7px;cursor:pointer;transition:color .12s}
.cal-tab:hover{color:var(--ink)}
.cal-tab.act{color:var(--ink);border-bottom-color:var(--eco)}
.cal-pres{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--bd)}
.cal-pr{background:var(--panel-2);border:1px solid var(--bd-2);border-radius:6px;color:var(--ink-2);
  font:600 9.5px var(--mono);padding:3px 8px;cursor:pointer;transition:.12s}
.cal-pr:hover{border-color:var(--eco);color:var(--eco)}
.cal-scroll{position:relative;max-height:372px;overflow-y:auto;padding:0 14px 12px;
  scrollbar-width:thin;scrollbar-color:#2a3547 transparent}
.cal-ynav{position:sticky;top:8px;z-index:2;display:flex;justify-content:flex-end;height:0;pointer-events:none}
.cal-ynav>div{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--bd-2);
  border-radius:7px;padding:2px 5px;pointer-events:auto;box-shadow:0 4px 14px rgba(0,0,0,.55)}
.cal-yb{background:none;border:0;color:var(--ink-2);font-size:13px;line-height:1;cursor:pointer;padding:1px 4px}
.cal-yb:hover{color:var(--eco)}
.cal-ylab{font:700 11px var(--mono);color:var(--ink);min-width:34px;text-align:center}
.cal-mt{font:700 13px var(--sans);color:var(--ink);margin:11px 0 6px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-d{font:500 11px var(--mono);color:var(--ink);text-align:center;padding:6px 0;border-radius:6px;cursor:pointer;transition:.1s}
.cal-d:hover{background:rgba(61,220,132,.16)}
.cal-d.we{color:#e0607a}   /* выходные — как в референсе DataLens */
.cal-d.nodata{color:var(--ink-3);opacity:.38;cursor:default}
.cal-d.nodata:hover{background:none}
.cal-pg{display:grid;gap:6px;margin:2px 0 4px}
.cal-pg.pg3{grid-template-columns:repeat(3,1fr)}
.cal-pg.pg4{grid-template-columns:repeat(4,1fr)}
.cal-pc{font:600 11px var(--sans);color:var(--ink);text-align:center;padding:8px 0;border:1px solid var(--bd);
  border-radius:7px;cursor:pointer;transition:.12s}
.cal-pc:hover{border-color:var(--eco)}
.cal-pc.dis{opacity:.32;cursor:default;border-color:transparent}
.cal-pc.dis:hover{border-color:transparent}
.cal-d.inr,.cal-pc.inr{background:rgba(61,220,132,.12);border-radius:0}
.cal-d.prev,.cal-pc.prev{background:rgba(61,220,132,.07)}
.cal-d.sfrom,.cal-pc.sfrom{border-radius:6px 0 0 6px}
.cal-d.sto,.cal-pc.sto{border-radius:0 6px 6px 0}
.cal-d.sfrom.sto,.cal-pc.sfrom.sto{border-radius:6px}
.cal-d.sfrom,.cal-d.sto,.cal-pc.sfrom,.cal-pc.sto{background:var(--eco);color:#0b0f17;font-weight:700}
.cal-hint{font:500 10px var(--mono);color:var(--ink-3);padding:8px 12px;text-align:center;border-top:1px solid var(--bd)}
.apply-h{height:var(--ctl-h);display:inline-flex;align-items:center;gap:4px;background:var(--eco);color:var(--bg-0);
  border:none;border-radius:8px;padding:0 14px;font:700 12px var(--sans);cursor:pointer;white-space:nowrap;transition:filter .15s}
.apply-h:hover{filter:brightness(1.08)}
.apply-h:disabled{opacity:.5;cursor:wait;filter:none} /* skip-design-check: in-flight guard, не редизайн */
.seg label:has(input:disabled){opacity:.45;cursor:wait} /* skip-design-check */
/* Stat Diversity: компактный режим-тумблер Players/Builds в заголовке панели (admin-only, контекстный 🔒) */
.divby-ctrl{margin-right:8px;gap:4px} /* skip-design-check */
.seg-sm{height:22px} .seg-sm label{height:16px;padding:0 8px;font-size:10px} /* skip-design-check */
.live-star{color:#ffd24a;font-size:11px;margin-left:2px} /* skip-design-check: Live-референс в StatsTable */
.act-h{height:var(--ctl-h);display:inline-flex;align-items:center;gap:5px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--bd-2);border-radius:8px;padding:0 11px;font:600 11.5px var(--sans);cursor:pointer;white-space:nowrap;transition:.15s}
.act-h:hover{border-color:var(--eco);color:var(--eco)}
/* skip-design-check: SSO logout-кнопка в существующем паттерне кнопок шапки (.act-h-клон), не редизайн;
   hover-цвет «уйти» (winner=розово-красный) вместо eco — единственное отличие */
.logout-h{height:var(--ctl-h);display:inline-flex;align-items:center;gap:5px;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--bd-2);border-radius:8px;padding:0 11px;font:600 11.5px var(--sans);cursor:pointer;white-space:nowrap;transition:.15s}
.logout-h:hover{border-color:var(--winner);color:var(--winner)}
/* skip-design-check: стабилизация ширины кнопки экспорта (layout-фикс, не редизайн) — текст
   «Exporting… NN% · NNN.N MB» меняется на каждом тике, без фикс-ширины правый блок шапки ездит */
.act-h.busyw{min-width:205px;justify-content:center;font-variant-numeric:tabular-nums}
.datehint{font-family:var(--mono);font-size:9px;color:var(--ink-3);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsep{width:1px;height:18px;background:var(--bd-2);margin:0 4px;flex:0 0 auto}
.frlab{font-family:var(--mono);font-size:9px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin:0 2px;font-weight:600;flex:0 0 auto} /* метка группы фильтров (Slice/Source/Admin) · skip-design-check */
.frlab.admin-only{color:var(--rake)}
.fbi{cursor:help}

/* ---------- панели ---------- */
.panel{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0)),var(--panel);
  border:1px solid var(--bd);border-radius:16px;padding:16px 18px 18px;margin-bottom:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -22px rgba(0,0,0,.85);
  animation:rise .55s cubic-bezier(.2,.75,.25,1) backwards;transition:border-color .2s,transform .2s}
.panel:hover{border-color:var(--bd-2)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.content .panel:nth-child(1){animation-delay:.02s}
.content .panel:nth-child(2){animation-delay:.08s}
.content .panel:nth-child(3){animation-delay:.14s}
.content .panel:nth-child(4){animation-delay:.20s}
.content .panel:nth-child(5){animation-delay:.26s}
.grid2 .panel{animation-delay:.06s}
.panel h3{margin:0 0 12px;font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:.01em;
  color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding-bottom:11px;border-bottom:1px solid var(--bd)}
.panel h3::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--eco);
  box-shadow:0 0 5px var(--glow-eco)}
.hint{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-3);letter-spacing:.01em}
/* all-in EV подача (Cats): бейдж покрытия в шапке + инлайн luck-приписка в ячейках WR/Win */
/* фикс-раскладка ТОЛЬКО таблицы Categories: ширины колонок не зависят от контента →
   инлайн-luck (появляется при тогле EV) НЕ двигает колонки влево-вправо. Scoped #t-cats —
   skill/Diversity/matrix-таблицы (.grid) не затронуты. nowrap уже на ячейках → luck не переносится. */
#t-cats table.grid{table-layout:fixed}
#t-cats table.grid th.row-h,#t-cats table.grid td.row-h{width:31%}
.ev-badge-slot{margin-left:auto}
.ev-pill{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--eco);border:1px solid rgba(61,220,132,.32);
  background:rgba(61,220,132,.06);border-radius:6px;padding:3px 9px;white-space:nowrap;cursor:default}
/* luck/unluck чип: собственная тёмная подложка изолирует от heatmap-фона ячейки (читается и на зелёном, и на красном).
   Стрелка ▲/▼ — избыточный признак знака помимо цвета. Оттенок A3 (темнее яркого, читаем на тёмной подложке). */
.ev-luck{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.02em;line-height:1;padding:2px 6px;border-radius:5px;vertical-align:middle;white-space:nowrap;
  background:rgba(6,10,16,.66);border:1px solid rgba(255,255,255,.12);color:var(--ink-2)}
.ev-luck::before{content:'▲';font-size:7px;line-height:1}
.ev-luck.neg::before{content:'▼'}
.ev-luck.pos{color:#4ed98f} .ev-luck.neg{color:#fb7493}
/* info-иконка с пояснением метрики */
.info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--bd-2);color:var(--ink-3);font:700 10px var(--sans);cursor:help;position:relative;
  text-transform:none;letter-spacing:0;flex:0 0 auto}
.info:hover{border-color:var(--eco);color:var(--eco)}
.info::after{content:attr(data-tip);position:absolute;top:140%;left:50%;transform:translateX(-50%);
  width:250px;background:#0e1420;border:1px solid var(--bd-2);border-radius:9px;padding:10px 12px;
  font:400 11.5px/1.55 var(--sans);color:var(--ink);text-transform:none;letter-spacing:0;text-align:left;
  box-shadow:0 10px 28px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.14s;z-index:200;pointer-events:none}
.info:hover::after{opacity:1;visibility:visible}
/* авто-флип тултипа к краю, если центрированный (left:50%) 250px-бокс уезжает за границу окна
   (правые панели на узких экранах / f-note-i у правого края фильтр-бара). Класс ставит JS по замеру
   позиции иконки (autoFlipTip). skip-design-check: фикс overflow, не редизайн */
.info.tip-r::after{left:auto;right:0;transform:none}
.info.tip-l::after{left:0;right:auto;transform:none}
/* takeaway: крупный вывод-цифра у виджета (как в моках) */
.tk{display:flex;align-items:baseline;gap:12px;margin:-2px 0 14px;flex-wrap:wrap}
/* hero-стат секции в mono (идентичность чисел mosaic: .mc-tot/.kpi-val) + glow по знаку (currentColor,
   setTK красит в neg/eco) — было: sans 800 с фикс. зелёным glow даже на красном минусе. */
.tk-big{font-family:var(--mono);font-weight:700;font-size:30px;line-height:1;color:var(--eco);
  text-shadow:0 0 22px color-mix(in srgb,currentColor 30%,transparent);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tk-cap{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);line-height:1.45;max-width:420px}
.chart-h{position:relative;height:330px}
.chart-h.big{height:380px}
.chart-h.tall{height:470px}
canvas{max-width:100%}

/* ===== Money · composition — adaptive mosaic (frontend-design B; legible at ANY group ratio) =====
   Площадь ∝ величина, но с полом легибельности: min-width колонок + min-height плиток, чтобы
   крошечная группа не схлопывалась до нечитаемости. Контент плитки адаптируется под ФАКТИЧЕСКИЙ
   размер через named container-queries (mctile/mccol). Крупное число тянется clamp(...cqi...).
   skip-design-check: реализовано через frontend-design (PHASE A мокап утверждён). */
#c-treemap.mc-host{display:flex;flex-direction:column;height:330px}
.mc-mosaic{flex:1;min-height:0;display:flex;gap:11px;align-items:stretch}
.mc-col{display:flex;flex-direction:column;min-width:108px;min-height:0;container:mccol / inline-size}
.mc-col.mc-drill{cursor:pointer}
.mc-head{padding:0 2px 9px;min-width:0}
.mc-nm{font-family:var(--sans);font-weight:700;font-size:clamp(10px,7cqi,12px);letter-spacing:.05em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-nm i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.mc-tot{font-family:var(--mono);font-weight:600;font-size:clamp(15px,13cqi,24px);letter-spacing:-.01em;margin-top:5px;line-height:1.05;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-mt{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-body{flex:1;display:flex;flex-direction:column;gap:7px;min-height:0;overflow:hidden}
.mc-tile{flex:1 1 0;min-height:30px;border-radius:11px;padding:8px 12px;position:relative;overflow:hidden;border:1px solid;
  display:flex;container:mctile / size}
.mc-tile.mc-foc{min-width:108px}
.mc-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;opacity:.85}
.mc-tin{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.mc-tin.mc-solo{justify-content:center;align-items:center}
.mc-tn{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-tgrp{display:flex;flex-direction:column;gap:1px;min-width:0}
.mc-tv{font-family:var(--mono);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-th{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-note{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-align:center}
.mc-cap{margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-l{border-color:rgba(247,153,62,.34);background:linear-gradient(155deg,rgba(247,153,62,.17),rgba(247,153,62,.04))}
.mc-l .mc-tv{color:var(--loser)} .mc-l::before{background:var(--loser)}
.mc-e{border-color:rgba(61,220,132,.34);background:linear-gradient(155deg,rgba(61,220,132,.17),rgba(61,220,132,.04))}
.mc-e .mc-tv{color:var(--eco)} .mc-e::before{background:var(--eco)}
.mc-w{border-color:rgba(242,77,111,.34);background:linear-gradient(155deg,rgba(242,77,111,.17),rgba(242,77,111,.04))}
.mc-w .mc-tv{color:var(--winner)} .mc-w::before{background:var(--winner)}
.mc-col.mc-drill:hover .mc-tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* контент по ФАКТИЧЕСКОМУ размеру плитки — устойчиво к любым пропорциям групп */
@container mctile (max-width:104px){ .mc-th{display:none} }
@container mctile (max-height:64px){ .mc-th{display:none} }
@container mctile (max-height:50px){ .mc-tin{flex-direction:row;align-items:baseline} .mc-tn{flex:1 1 auto} }
@container mctile (max-height:30px){ .mc-tn{font-size:10.5px} .mc-tv{font-size:11.5px} }
@container mccol (max-width:140px){ .mc-mt{font-size:9.5px} }
/* тумблер «после рейка / до рейка» в шапке блока */
.mc-rake-seg{display:inline-flex;gap:2px;background:var(--panel-2);border:1px solid var(--bd-2);border-radius:8px;padding:2px}
.mc-rake-seg button{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);background:none;border:0;border-radius:6px;padding:3px 9px;cursor:pointer;transition:.14s;white-space:nowrap}
.mc-rake-seg button:hover{color:var(--ink)}
.mc-rake-seg button.on{background:rgba(61,220,132,.14);color:var(--eco)}

/* ---------- фильтры ---------- */
.fblock{margin-bottom:15px}
/* секции-аккордеон + чипы активных фильтров (панель v2) · skip-design-check */
.fchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.fchips:empty{display:none}
/* skip-design-check: фикс CSS-коллизии (не редизайн). active-filter pills (#f-chips) квалифицируем
   .fchips, чтобы НЕ конфликтовать с Timings-чипами (.chips .chip ниже): иначе позднее правило
   перебивало зелёную пилюлю серым toggle-стилем. */
.fchips .chip{font-family:var(--mono);font-size:10.5px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.28);color:var(--eco-soft);
  border-radius:20px;padding:3px 5px 3px 10px}
.fchips .chip.ctx{background:rgba(255,255,255,.05);border-color:var(--bd-2);color:var(--ink-2);padding-right:10px}
.fchips .chip.adm{background:rgba(236,201,75,.1);border-color:rgba(236,201,75,.3);color:var(--rake)}
.fchips .chip .x{cursor:pointer;color:var(--ink-3);font-size:9px;width:14px;height:14px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:50%;transition:.14s}
.fchips .chip .x:hover{background:rgba(242,77,111,.2);color:var(--winner)}
.flabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.01em;
  color:var(--ink-2);margin-bottom:7px;font-weight:500;display:flex;align-items:center;gap:7px}
.nodata{font-family:var(--sans);font-weight:500;text-transform:none;letter-spacing:0;color:var(--rake);
  background:rgba(236,201,75,.1);border:1px solid rgba(236,201,75,.25);border-radius:8px;padding:1px 6px;font-size:9px}
.sel{width:100%;appearance:none;-webkit-appearance:none;font-family:var(--sans);font-size:12.5px;color:var(--ink);
  padding:8px 28px 8px 11px;border:1px solid var(--bd-2);border-radius:9px;background:var(--panel-2);cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2362708 4' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23647084' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;transition:.16s}
.sel:hover{border-color:#3a4658}
.sel:focus{outline:none;border-color:var(--eco);box-shadow:0 0 0 3px rgba(61,220,132,.16)}
.sel:disabled{opacity:.5;cursor:not-allowed;background:rgba(255,255,255,.02)}
.sel option{background:var(--panel-2);color:var(--ink)}
.daterange{display:flex;flex-direction:column;gap:7px}
.daterange label{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.daterange input{flex:1;min-width:0;font-family:var(--mono);font-size:12px;padding:7px 9px;color:var(--ink);
  border:1px solid var(--bd-2);border-radius:9px;background:var(--panel-2);color-scheme:dark}
.daterange input:focus{outline:none;border-color:var(--eco);box-shadow:0 0 0 3px rgba(61,220,132,.16)}
.radios{display:flex;flex-direction:column;gap:7px}
.radios label{font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.radios input{accent-color:var(--eco)}
.radios label:has(input:disabled){color:var(--ink-3);cursor:not-allowed}
.small{font-size:11px}
#f-note{margin-top:8px;padding-top:15px;border-top:1px solid var(--bd);color:var(--ink-3);
  font-size:11px;line-height:1.6}

/* инлайн-контролы */
.inline-sel{font-family:var(--sans);font-size:12px;padding:5px 24px 5px 9px;border:1px solid var(--bd-2);
  border-radius:8px;background:var(--panel-2);color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23647084' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center}
.inline-ctrl{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px;letter-spacing:.02em}
.inline-ctrl b{color:var(--eco);font-weight:600}
.inline-ctrl input[type=range]{vertical-align:middle;accent-color:var(--eco)}

/* ---------- таблицы ---------- */
.tbl-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--bd)}
.tbl-wrap.scroll{max-height:480px;overflow-y:auto}
table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:12px}
table.grid th,table.grid td{padding:7px 11px;text-align:right;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.045)}
table.grid th{font-family:var(--mono);background:linear-gradient(180deg,#222d40,#19212e);color:var(--ink-2);font-weight:600;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:3;
  border-bottom:1px solid var(--bd-2);box-shadow:0 3px 8px -3px rgba(0,0,0,.6)}
table.grid td.row-h{text-align:left;font-weight:600;color:var(--ink);background:#161d29;font-family:var(--sans)}
table.grid th.row-h{text-align:left;font-weight:600;color:var(--ink-2);background:linear-gradient(180deg,#222d40,#19212e);font-family:var(--mono)}
table.grid tbody tr:nth-child(even) td{background:rgba(255,255,255,.014)}
table.grid tbody tr:hover td{background:rgba(61,220,132,.06)}
table.grid tr.total td{font-weight:700;background:rgba(255,255,255,.05)}
.cat-pill{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;
  box-shadow:0 0 8px currentColor}
.tech-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font:600 10px var(--mono);
  letter-spacing:.02em;color:var(--ink-2);background:rgba(255,255,255,.07);border:1px solid var(--bd-2)}
.ai-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:6px;vertical-align:middle;
  background:var(--accent,#3fb0ff);opacity:.6;cursor:help}
.sortable{cursor:pointer;user-select:none} .sortable:hover{background:rgba(255,255,255,.06)!important;color:var(--ink)}

/* легенда scatter */
.legend-row{display:flex;gap:22px;margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:.02em}
.lg{display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.eco{background:var(--eco);box-shadow:0 0 8px var(--glow-eco)}
.dot.loser{background:var(--loser);box-shadow:0 0 8px rgba(247,153,62,.4)}
.dot.winner{background:var(--winner);box-shadow:0 0 8px var(--glow-win)}

.tim-controls{display:flex;align-items:center;gap:13px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--sans);border:1px solid var(--bd-2);background:var(--panel-2);border-radius:8px;
  padding:5px 12px;font-size:11.5px;cursor:pointer;user-select:none;transition:.14s;color:var(--ink-2);letter-spacing:.02em}
.chip:hover{border-color:#3a4658;color:var(--ink)}
.chip.on{background:rgba(61,220,132,.14);border-color:var(--eco);color:var(--eco);box-shadow:0 0 14px rgba(61,220,132,.12)}
.note{font-size:12.5px;line-height:1.7;color:var(--ink);background:rgba(236,201,75,.06);
  border:1px solid rgba(236,201,75,.22)}
.note b{color:var(--rake)}
.hidden{display:none}
/* единая HTML-легенда для всех графиков (и Plotly, и Chart.js) */
.lgd{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px;
  font-family:var(--sans);font-size:12px;color:var(--ink-2)}
.lgd span{display:inline-flex;align-items:center;gap:7px}
.lgd i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
.mini-btn{font-family:var(--sans);font-size:11px;color:var(--ink-2);background:var(--panel-2);
  border:1px solid var(--bd-2);border-radius:7px;padding:3px 10px;cursor:pointer;margin-left:auto;transition:.14s}
.mini-btn:hover{border-color:var(--eco);color:var(--eco)}

/* скроллбары */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#283142;border-radius:8px;border:3px solid var(--bg-0)}
*::-webkit-scrollbar-thumb:hover{background:#36425a}

/* ===== Group Matrix (переливы) · skip-design-check ===== */
.mx-toolbar{display:flex;justify-content:flex-end;gap:14px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin:-2px 0 14px}
table.mxt{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
table.mxt th,table.mxt td{padding:5.5px 14px}
/* skip-design-check: липкий заголовок столбцов матрицы — прилипает под topbar+tabs (~99px), видно «с чем пересечение» при скролле длинной tier-таблицы */
table.mxt thead th{font-family:var(--mono);font-size:12px;font-weight:700;text-align:right;color:var(--ink);
  position:sticky;top:99px;z-index:6;background:var(--panel);box-shadow:inset 0 -1px 0 var(--bd-2)}
table.mxt thead th.lab{text-align:left;color:var(--ink-3);font-weight:500;font-size:11px}
table.mxt thead th .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.mxt tr.block td{padding:11px 14px 5px;font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;border-top:1px dashed rgba(255,255,255,.16)}
.mxt tr.block.first td{border-top:0}
.mxt tr.block .pill{display:inline-flex;align-items:center;gap:8px}
.mxt tr.block .pill .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.mxt td.metric{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:left;padding-left:26px}
.mxt td.metric.nw{color:var(--ink-2);font-weight:600}
.mxt td.val{font-family:var(--mono);font-size:12.5px;font-weight:600;text-align:right}
.mxt td.sumv{font-family:var(--mono);font-size:12.5px;font-weight:700;text-align:right;background:rgba(255,255,255,.03)}
.mxt tr.mrow:hover td{background:rgba(61,220,132,.04)}
.mxt tr.share td{background:rgba(236,201,75,.045)} .mxt tr.share td.metric{color:var(--rake)}
.mxt .pos{color:var(--pos)} .mxt .negc{color:var(--neg)} .mxt .dim{color:var(--ink-2)}
.mx-cap{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:14px;line-height:1.6}
.mx-cap b{color:var(--ink-2)}
.mx-gran-row{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin:-2px 0 14px}
.mx-gbtn{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--bd-2);
  border-radius:8px;padding:4px 12px;cursor:pointer}
.mx-gbtn:hover{border-color:var(--eco);color:var(--eco)}
.mx-gbtn.active{background:rgba(61,220,132,.14);border-color:var(--eco);color:var(--eco);font-weight:600}
/* ---------- Group Matrix v2: KPI-строка, бары в ячейках, h2h-грид · skip-design-check ---------- */
.mx-warn{margin:0 0 14px;padding:9px 13px;border-radius:9px;background:rgba(236,201,75,.1);border:1px solid rgba(236,201,75,.34);font-family:var(--mono);font-size:11.5px;color:#f3e3a6;line-height:1.5}
.mx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px}
.mx-kpi{position:relative;background:var(--panel-2);border:1px solid var(--bd);border-radius:11px;padding:11px 14px;overflow:hidden}
.mx-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--eco)}
.mx-kpi.bad::before{background:var(--winner)} .mx-kpi.warn::before{background:var(--rake)}
.mx-kpi .mk-l{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em}
.mx-kpi .mk-v{font-family:var(--mono);font-size:19px;font-weight:700;margin-top:4px;line-height:1.1}
.mx-kpi .mk-s{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);margin-top:3px}
.mx-vrow{display:flex;align-items:center;gap:7px;margin:0 0 13px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.mx-vbtn,.mx-mbtn,.mx-dbtn,.mx-hbtn{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--bd-2);border-radius:8px;padding:4px 11px;cursor:pointer}
.mx-vbtn:hover,.mx-mbtn:hover,.mx-dbtn:hover,.mx-hbtn:hover{border-color:var(--eco);color:var(--eco)}
.mx-hbtn{text-decoration:none;line-height:normal} /* skip-design-check: help-ссылка в существующем стиле кнопок тулбара */
.mx-vbtn.active,.mx-mbtn.active{background:rgba(61,220,132,.14);border-color:var(--eco);color:var(--eco);font-weight:600}
.mx-sep{width:1px;height:18px;background:var(--bd-2);margin:0 4px}
.mx-leg{margin-left:auto;display:inline-flex;align-items:center;color:var(--ink-3);font-size:10.5px}
.mx-leg .lg{width:9px;height:9px;border-radius:2px;display:inline-block;margin:0 5px 0 9px}
.mx-leg .lg.pos{background:rgba(61,220,132,.6)} .mx-leg .lg.neg{background:rgba(242,77,111,.55)}
.mxt td.cell{position:relative;text-align:right;font-family:var(--mono);font-size:12.5px;font-weight:600}
.mxt td.cell .cbar{position:absolute;right:6px;top:50%;height:60%;transform:translateY(-50%);border-radius:3px;opacity:.28;z-index:0}
.mxt td.cell .v{position:relative;z-index:1;cursor:help}
.mxt td.cell.pos .v{color:var(--pos)} .mxt td.cell.neg .v{color:var(--neg)} .mxt td.cell.dim .v{color:var(--ink-3)}
.mxt tr.key td.cell .v{font-weight:700;font-size:13px}
.mxt-wrap.collapsed tr.extra{display:none}
.h2h-wrap{overflow-x:auto}
table.h2h{border-collapse:separate;border-spacing:6px;margin:2px 0}
.h2h th{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);font-weight:600;padding:4px 6px;white-space:nowrap}
.h2h th.cor{color:var(--ink-3);font-size:10px;font-weight:500;text-align:left}
.h2h th.rh{text-align:right}
.h2h th .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.h2h td{min-width:104px;height:62px;border-radius:10px;text-align:center;font-family:var(--mono);border:1px solid var(--bd);vertical-align:middle}
.h2h td .big{font-size:17px;font-weight:700;display:block}
.h2h td .big.pos{color:var(--pos)} .h2h td .big.neg{color:var(--neg)} .h2h td .big.dim{color:var(--ink-2)}
.h2h td .sm{font-size:9.5px;color:var(--ink-2);margin-top:3px;display:block}
.h2h td.diag{background:repeating-linear-gradient(45deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 6px,transparent 6px,transparent 12px)}
.h2h td.diag .big{color:var(--ink-3);font-size:14px} .h2h td.diag .sm{color:var(--ink-3)}
/* центрирование грида (robust при overflow) + cross-highlight + информативный тултип · skip-design-check */
table.h2h{margin-inline:auto}
.h2h td,.h2h th{transition:opacity .14s,box-shadow .14s,color .14s}
.h2h.focus td:not(.hi){opacity:.28}
.h2h td.hi{box-shadow:0 0 0 1.6px rgba(61,220,132,.65),0 8px 20px -10px rgba(0,0,0,.7);opacity:1!important;position:relative;z-index:2}
.h2h th.hi{color:var(--eco);opacity:1!important}
.mxt td,.mxt th{transition:background .12s,color .12s}
.mxt td.hi{background:rgba(61,220,132,.08)!important}
.mxt tr.hot td{background:rgba(61,220,132,.07)}
.mxt tr.hot td.metric{color:var(--ink)}
/* в подсвеченной/закреплённой строке тёмные dim-цифры (meets/rake) осветляем; pos/neg остаются цветными · skip-design-check */
.mxt tr.hot td.cell.dim .v{color:var(--ink-2)}
.mxt tr.pinned td.cell.dim .v{color:var(--ink);font-weight:600}
/* sticky-строка матрицы: клик закрепляет выделение · skip-design-check (внутри frontend-design workflow) */
.mxt tr.mrow{cursor:pointer}
.mxt tr.pinned td{background:rgba(61,220,132,.11)}
.mxt tr.pinned td.metric{color:var(--eco);font-weight:700;box-shadow:inset 3px 0 0 var(--eco)}
.mxt .ch,.h2h .ch,.h2h .rh{cursor:default}
.mx-tip{position:fixed;z-index:400;display:none;pointer-events:none;min-width:186px;max-width:252px;
  background:linear-gradient(180deg,#111826,#0c121d);border:1px solid var(--bd-2);border-radius:11px;padding:11px 13px;
  box-shadow:0 18px 42px -12px rgba(0,0,0,.82);font-family:var(--mono)}
.mx-tip .tt-h{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--bd);letter-spacing:.01em}
.mx-tip .tt-mut{color:var(--ink-3);font-weight:400}
.mx-tip .tt-val{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px;font-variant-numeric:tabular-nums}
.mx-tip .tt-row{display:flex;justify-content:space-between;gap:18px;font-size:11px;color:var(--ink-3);padding:2.5px 0}
.mx-tip .tt-row b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.mx-tip .tt-row b.pos{color:var(--pos)} .mx-tip .tt-row b.neg{color:var(--neg)}
.mx-tip .tt-note{font-size:10px;color:var(--ink-3);line-height:1.5;margin-top:7px;padding-top:7px;border-top:1px solid var(--bd)}
.err-banner{margin:14px 30px 0;padding:11px 16px;background:rgba(242,77,111,.13);border:1px solid var(--winner);
  border-radius:10px;color:#ffd9e1;font-family:var(--mono);font-size:12px;letter-spacing:.01em}
.dq-banner{margin:14px 30px 0;padding:11px 16px;background:rgba(236,201,75,.12);border:1px solid var(--rake);
  border-radius:10px;color:#f3e3a6;font-family:var(--mono);font-size:12px;letter-spacing:.01em}

/* ---------- KPI-ряд итогов (с дельтой к пред. периоду) · skip-design-check ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
@media(max-width:1180px){.kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
/* mosaic-стиль (frontend-design A · "Mosaic Tile", утв. владельцем 2026-06-19): категорийный
   тинт-wash + тинт-рамка + свечение + число цветом категории — всё выводится из --stripe через
   color-mix, поэтому ОДНА правка поднимает и Pie-ряд, и все KPI-ряды MTT консистентно. Сиблинг .mc-* */
.kpi-card{position:relative;
  background:linear-gradient(155deg,
      color-mix(in srgb,var(--stripe,var(--accent)) 16%,transparent),
      color-mix(in srgb,var(--stripe,var(--accent)) 4%,transparent)),var(--panel);
  border:1px solid color-mix(in srgb,var(--stripe,var(--accent)) 32%,var(--bd));border-radius:14px;
  padding:13px 15px 12px;overflow:hidden;min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 30px -24px rgba(0,0,0,.85),0 0 24px -14px var(--stripe,var(--accent));
  animation:rise .5s cubic-bezier(.2,.75,.25,1) backwards}
.kpi-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stripe,var(--accent));opacity:.92;box-shadow:0 0 11px var(--stripe,var(--accent))}
.kpi-label{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-val{font-family:var(--mono);font-size:21px;font-weight:700;color:var(--stripe,var(--accent));margin-top:6px;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi-delta{font-family:var(--mono);font-size:11px;font-weight:600;margin-top:5px;min-height:14px;letter-spacing:.02em;color:var(--ink-3)}
.kpi-delta.up{color:var(--pos)} .kpi-delta.down{color:var(--neg)}

/* stacked-ряд при окне «1 день» — композиционный срез вместо вырожденного блока (frontend-design A) · skip-design-check */
.dyn-comp{display:flex;flex-direction:column;justify-content:center;height:100%;gap:14px;padding:4px 2px}
.dc-strip{display:flex;height:34px;border-radius:10px;overflow:hidden;border:1px solid var(--bd)}
.dc-seg{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;font-weight:600;color:#0a0e16;min-width:0}
.dc-rows{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dc-row{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:10px;
  background:color-mix(in srgb,var(--seg) 10%,transparent);border:1px solid color-mix(in srgb,var(--seg) 22%,transparent)}
.dc-row i{width:9px;height:9px;border-radius:3px;background:var(--seg);flex:0 0 auto}
.dc-row .nm{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--ink-2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-row .v{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--seg);font-variant-numeric:tabular-nums}
.dc-row .p{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.dc-hint{font-family:var(--mono);font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.dc-hint::before{content:"◔";color:var(--rake)}

/* Volume·состав — современные тинт-бары (frontend-design A, утв. 2026-06-19) · skip-design-check */
#c-sunburst .vb-list{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:2px 0}
.vb-row{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center}
.vb-name{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-track{position:relative;height:26px;background:rgba(255,255,255,.03);border-radius:9px;border:1px solid var(--bd)}
.vb-fill{height:100%;border-radius:8px;min-width:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--seg) 55%,transparent),var(--seg));box-shadow:0 0 18px -8px var(--seg)}
.vb-lab{position:absolute;top:0;height:100%;display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;white-space:nowrap;pointer-events:none}
.vb-lab .h{color:var(--ink)} .vb-lab .p{color:var(--ink-3)}
.vb-lab[data-in] .h{color:#0a0e16} .vb-lab[data-in] .p{color:rgba(10,14,22,.72)}

/* DOM-пагинация таблицы Diversity (перф на 10k игроков) · skip-design-check */
.div-more{display:block;width:100%;margin-top:8px;padding:10px;background:var(--panel-2);
  border:1px dashed var(--bd-2);border-radius:9px;color:var(--ink-2);font:600 12px var(--mono);
  cursor:pointer;transition:.14s}
.div-more:hover{border-color:var(--eco);color:var(--eco)}

/* ---------- Lose Pie: SVG-донат с внешними подписями (DataLens-паттерн) · skip-design-check ---------- */
#c-pie{position:relative;user-select:none}
.lpie{display:block;margin:0 auto}
/* широкая панель: донат слева + breakdown-колонка справа (имя/сумма/доля-бар), ховер синхронен */
.lpie-wrap{display:flex;height:100%;align-items:stretch;justify-content:center}  /* связка центрируется целиком */
.lpie-svgbox{position:relative;flex:0 0 auto}
.lpie-side{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:10px 22px 10px 6px;border-left:1px solid rgba(255,255,255,.06);min-width:240px}
/* mosaic-эхо: каждая строка breakdown — мини-плитка, тинт по цвету сегмента (--seg), как .mc-tile */
.lps-row{display:grid;grid-template-columns:12px 1fr auto;grid-template-areas:"d n v" "d b p";
  gap:5px 10px;align-items:center;padding:8px 12px;border-radius:10px;transition:background .12s;
  background:color-mix(in srgb,var(--seg,var(--accent)) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--seg,var(--accent)) 20%,transparent)}
.lps-row:hover,.lps-row.hot{background:color-mix(in srgb,var(--seg,var(--accent)) 19%,transparent)}
.lps-dot{grid-area:d;width:10px;height:10px;border-radius:3px;align-self:center}
.lps-name{grid-area:n;font:600 12px var(--sans);color:var(--ink-2);white-space:nowrap}
.lps-val{grid-area:v;font:700 14px var(--mono);color:var(--seg,var(--ink));text-align:right;font-variant-numeric:tabular-nums}
.lps-bar{grid-area:b;height:4px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.lps-bar i{display:block;height:100%;border-radius:3px;opacity:.85}
.lps-pct{grid-area:p;font:600 11px var(--mono);color:var(--ink-3);text-align:right}
.lpie-seg{stroke:var(--panel);stroke-width:2.5;pointer-events:none;   /* мышь ловят статичные .lpie-hit → выдвижение не мигает у краёв */
  transition:transform .14s cubic-bezier(.2,.75,.3,1),filter .14s}
.lpie-seg.on{transform:translate(var(--tx),var(--ty));filter:brightness(1.14) saturate(1.06)}  /* выдвижение по биссектрисе (без внешнего ободка) */
.lpie-hit{cursor:pointer}
.lpie-lead{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1}
.lpie-name{font:600 11.5px var(--sans);fill:var(--ink-2)}
.lpie-pct{font:700 12.5px var(--mono);fill:var(--ink)}
.lpie-center{position:absolute;transform:translate(-50%,-50%);text-align:center;pointer-events:none;line-height:1.15}
.lpie-center b{font:800 26px var(--mono);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(61,220,132,.14)}
.lpie-warn{display:block;font:600 9px var(--sans);color:var(--loser);margin-top:4px;max-width:120px}
.lpie-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:baseline}

/* инсайт-строка под панелью — нарратив, читаемый без ховера · skip-design-check */
.insight{font-size:12px;color:var(--ink-2);margin:11px 2px 0;line-height:1.5;display:flex;gap:7px;align-items:flex-start}
.insight::before{content:"▸";color:var(--accent);flex:0 0 auto;font-weight:700}
.insight b{color:var(--ink);font-weight:600}

/* мини-бар-в-ячейке (StatsTable) · skip-design-check */
td.cellbar{position:relative}
td.cellbar .cb-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:60%;border-radius:0 3px 3px 0;opacity:.16;z-index:0;pointer-events:none}
td.cellbar .cb-txt{position:relative;z-index:1}

/* пустое состояние графика · skip-design-check */
.empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:120px;
  color:var(--ink-3);font-family:var(--mono);font-size:12px;text-align:center;line-height:1.6;padding:20px}
/* осмысленный empty-state (frontend-design, утв. 2026-06-19) · skip-design-check */
.es{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px}
.es-ic{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--eco) 12%,transparent);border:1px solid color-mix(in srgb,var(--eco) 26%,transparent);
  box-shadow:0 0 28px -10px var(--eco)}
.es-ic svg{width:28px;height:28px}
.es-t{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink)}
.es-s{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);max-width:420px;line-height:1.5}
.es-hint{font-family:var(--mono);font-size:11px;color:var(--eco);display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:8px;background:color-mix(in srgb,var(--eco) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--eco) 24%,transparent)}

/* ===== Data Quality (admin-вкладка): severity-чипы, heat-bar, кнопка выгрузки · skip-design-check ===== */
.dq-flt{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:2px 0 4px}
.dq-sev{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:middle;
  box-shadow:0 0 6px -1px currentColor}
table.grid td.dq-cat{text-align:left;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);max-width:430px;
  overflow:hidden;text-overflow:ellipsis;cursor:help}   /* table.grid — иначе проигрывает по специфичности общему text-align:right */
/* наш комментарий к известной ложной тревоге оператора (под текстом ошибки) · skip-design-check */
.dq-cat .dq-note{display:block;white-space:normal;cursor:default;margin-top:6px;font:500 11px var(--sans); /* skip-design-check */
  color:var(--eco-soft);background:rgba(61,220,132,.07);border-left:2px solid var(--eco);
  border-radius:0 7px 7px 0;padding:6px 10px;line-height:1.5}
.dq-bar{position:relative;display:inline-block;width:96px;height:13px;border-radius:3px;vertical-align:middle;
  background:rgba(255,255,255,.05);overflow:hidden;margin-left:8px}
.dq-bar i{position:absolute;inset:0 auto 0 0;border-radius:3px;
  background:linear-gradient(90deg,var(--rake),var(--loser) 55%,var(--winner))}
.dq-dl{font-family:var(--mono);font-size:11px;padding:2.5px 9px;border-radius:6px;cursor:pointer;
  color:var(--ink-2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.dq-dl:hover{color:var(--ink);border-color:var(--accent);background:rgba(61,220,132,.08)}
.dq-dl:disabled{opacity:.45;cursor:default}
.dq-act{white-space:nowrap}
.dq-eye{font-family:var(--mono);font-size:11px;padding:2.5px 7px;border-radius:6px;cursor:pointer;
  color:var(--ink-2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);margin-right:6px}
.dq-eye:hover{color:var(--ink);border-color:var(--accent);background:rgba(61,220,132,.08)}
.dq-eye:disabled{opacity:.45;cursor:default}
.dq-dx{font-family:var(--mono);font-size:11px;padding:2.5px 7px;border-radius:6px;cursor:pointer;
  color:var(--ink-2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);margin-right:6px}
.dq-dx:hover{color:var(--ink);border-color:var(--rake);background:rgba(236,201,75,.08)}
.dq-dx:disabled{opacity:.45;cursor:default}
/* раскрытие диагноза причин под строкой */
tr.dq-dxrow td{background:#10161f;text-align:left;padding:10px 14px 9px}
.dq-dx-i{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:2px 0}
.dq-dx-i b{color:var(--ink);font-weight:600;flex:0 0 210px}
.dq-dx-i .dq-bar{flex:0 0 130px;width:130px;margin-left:0}
.dq-dx-n{flex:0 0 110px;color:var(--ink-2);text-align:right}
.dq-dx-d{color:var(--ink-3)}
.dq-dx-f{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:7px;border-top:1px solid rgba(255,255,255,.05);padding-top:6px}
/* пер-игрок разбор руки в модалке */
.dq-ptab{margin:4px 0 8px}
tr.dq-prow-bad td{color:var(--winner);font-weight:600}
.dq-bot{display:inline-block;font:600 9px var(--mono);border-radius:4px;padding:0 5px;
  background:rgba(63,176,255,.12);color:#6fc3ff;border:1px solid rgba(63,176,255,.3)}
.dq-cause{color:var(--rake)}
.dq-leg{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.dq-leg-i{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.dq-leg-i b{color:var(--ink-2);font-weight:600}
/* модалка предпросмотра раздач */
#dq-modal-ov{display:none;position:fixed;inset:0;z-index:1200;background:rgba(8,12,18,.66);
  backdrop-filter:blur(2px);align-items:flex-start;justify-content:center;overflow:auto;padding:38px 16px}
.dq-modal{background:var(--panel-2);border:1px solid rgba(255,255,255,.12);border-radius:12px;
  max-width:860px;width:100%;max-height:calc(100vh - 76px);overflow:auto;padding:14px 18px;
  box-shadow:0 14px 44px rgba(0,0,0,.55)}
.dq-mh{display:flex;align-items:center;gap:10px}
.dq-mh b{color:var(--ink);font-size:14px}
.dq-mcap{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.dq-mx{margin-left:auto;background:none;border:0;color:var(--ink-3);font-size:14px;cursor:pointer}
.dq-mx:hover{color:var(--ink)}
.dq-mwhat{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:4px}
/* skip-design-check: косметика в утверждённой системе — поясняющий блок «что значит / откуда колонки»
   читаемым sans + акцентная левая планка (те же токены, что у .dq-mwhat/.dq-leg, не редизайн) */
.dq-mhelp{font:500 12px/1.55 var(--sans);color:var(--ink-2);background:rgba(61,220,132,.06);
  border-left:3px solid var(--accent);border-radius:6px;padding:8px 11px;margin:8px 0 4px}
.dq-hhcap{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin:8px 0 3px}
.dq-mmeta{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin:12px 0 4px}
pre.dq-hh{margin:0;padding:10px 12px;background:#0d131d;border:1px solid rgba(255,255,255,.07);
  border-radius:8px;font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--ink-2);
  white-space:pre-wrap;max-height:340px;overflow:auto}
/* шапка (Room/Game/Date/Apply) к Data Quality не относится — на вкладке гасится */
.src-bar.hdr-off .src-ctrl{opacity:.35;pointer-events:none;filter:saturate(.3)}
/* сортировка таблиц DQ кликом по заголовку */
table.grid th.sortable{cursor:pointer;user-select:none}
table.grid th.sortable:hover{color:var(--ink)}
table.grid th .s-ind{margin-left:4px;font-size:8px;color:var(--accent)}

/* ===== admin/client сегрегация (этап 1) · skip-design-check: косметика в утверждённой системе ===== */
/* сворачиваемая группа admin-фильтров: display:contents — дети живут в flex .frow как раньше */
.agrp{display:contents}
.agrp.closed{display:none}
.adm-tgl{background:none;border:1px solid transparent;border-radius:6px;padding:2px 7px;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;height:auto}
.adm-tgl:hover{border-color:var(--bd-2)}
.adm-tgl b{font-weight:600}
/* 🔒-маркер: admin-only контрол/кнопку клиент не видит (приглушённый, не кричит) */
.fctl.admin-only .fcl::before{content:'🔒 ';font-size:8px;filter:grayscale(1);opacity:.55}
.act-h.admin-only::before{content:'🔒';font-size:9px;filter:grayscale(1);opacity:.55;margin-right:2px}
#tab-btn-admin::before{content:'🔒 ';font-size:9px;filter:grayscale(1);opacity:.55}
/* превью клиентской роли: включённый режим подсвечен (rake-жёлтый = «внимание, не боевой вид») */
.pv-btn.on{border-color:var(--rake);color:var(--rake)}

/* ===== admin-зона, этап 2 · skip-design-check: под-навигация секций (DQ/Tools) + rake-идентичность ===== */
.adm-zone-head{display:flex;align-items:center;gap:14px;margin:2px 0 16px}
.adm-zone-lab{font:600 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--rake);opacity:.9}
.adm-nav{display:inline-flex;align-items:center;background:var(--panel-2);border:1px solid var(--bd-2);
  border-radius:9px;padding:3px;gap:2px}
.anav-btn{border:0;background:transparent;color:var(--ink-3);font:600 11px var(--mono);letter-spacing:.05em;
  text-transform:uppercase;padding:6px 14px;border-radius:7px;cursor:pointer;transition:.15s}
.anav-btn:hover{color:var(--ink-2)}
.anav-btn.active{background:rgba(236,201,75,.13);color:var(--rake)}
#tab-admin .panel h3::before{background:var(--rake);box-shadow:0 0 5px rgba(236,201,75,.4)}
/* Runtime request-audit (Admin) */
.audit-summary{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.audit-pill{font:600 11px var(--mono);color:var(--ink-3);background:rgba(255,255,255,.04);
  border:1px solid var(--bd);border-radius:7px;padding:5px 9px}
.audit-pill b{color:var(--ink);font-weight:700}
.audit-pill .audit-bad{color:var(--winner)}
.audit-grid td{vertical-align:top}
.audit-kind{display:inline-flex;align-items:center;min-width:84px;justify-content:center;
  font:700 10px var(--mono);letter-spacing:.04em;text-transform:uppercase;border-radius:6px;
  padding:3px 7px;background:rgba(255,255,255,.05);color:var(--ink-3);border:1px solid rgba(255,255,255,.09)}
.audit-kind.request_end{color:var(--eco);background:rgba(61,220,132,.08);border-color:rgba(61,220,132,.2)}
.audit-kind.request_start{color:#6fc3ff;background:rgba(111,195,255,.08);border-color:rgba(111,195,255,.2)}
.audit-kind.request_error{color:var(--winner);background:rgba(242,77,111,.08);border-color:rgba(242,77,111,.23)}
.audit-st{display:inline-block;min-width:38px;text-align:center;font:700 11px var(--mono);border-radius:6px;padding:3px 7px}
.audit-st.ok{color:var(--eco);background:rgba(61,220,132,.08)}
.audit-st.warn{color:var(--rake);background:rgba(236,201,75,.09)}
.audit-st.bad{color:var(--winner);background:rgba(242,77,111,.09)}
table.grid td.audit-q{text-align:left;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink-3);font-family:var(--mono);font-size:10.5px}
/* карточка Client Report (Admin → Tools) */
.rpt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 2px}
.rpt-note{display:flex;gap:9px;align-items:flex-start;background:rgba(236,201,75,.06);
  border:1px solid rgba(236,201,75,.22);border-radius:10px;padding:10px 13px;
  font:500 11.5px var(--sans);line-height:1.5;color:var(--ink-2);margin:13px 0}
.rpt-note b{color:var(--rake);font-weight:700}
.rpt-foot{display:flex;align-items:center;gap:12px}
.rpt-out{font:500 11px var(--mono);color:var(--ink-3)}

/* ===== Loader · skip-design-check: функциональная обвязка загрузки ========================
   Честный индикатор без выдуманного процента. CH-латентность непредсказуема — старый %-бар
   считал прогресс от оценки времени и всегда залипал на 95%, а затем замирал на 100% во время
   синхронного рендера Plotly. Здесь — indeterminate-«комета» на CSS transform: анимация живёт
   на compositor-потоке, поэтому НЕ замирает, пока главный поток занят рендером. Два вида:
   .ld-overlay (первичная загрузка окна, по центру + счётчик секунд) и #toploader (slim-полоса
   сверху для вторичных дозагрузок: players/builds/matrix/dq и HH-экспортов). =============== */
@keyframes ld-slide{
  0%  {transform:translateX(-115%) scaleX(.6)}
  50% {transform:translateX(45%)   scaleX(1)}
  100%{transform:translateX(265%)  scaleX(.6)}
}
@keyframes ld-pulse{0%,100%{opacity:1}50%{opacity:.32}}
@keyframes ld-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* ---- центральный оверлей ---- */
.ld-overlay{position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;
  background:rgba(7,11,18,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ld-overlay.ld-done{opacity:0;transition:opacity .3s ease .1s}
.ld-card{min-width:286px;max-width:82vw;text-align:center;font-family:var(--sans);
  background:linear-gradient(180deg,#171f2e,#121925);border:1px solid var(--bd-2);border-radius:16px;
  padding:21px 27px 18px;box-shadow:0 22px 60px -18px rgba(0,0,0,.72),0 0 0 1px rgba(61,220,132,.05) inset;
  animation:ld-pop .26s ease}
.ld-title{display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--ink);font-weight:700;font-size:14.5px;letter-spacing:.01em}
.ld-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--eco);
  box-shadow:0 0 0 4px rgba(61,220,132,.14),0 0 12px var(--glow-eco);animation:ld-pulse 1.1s ease-in-out infinite}
.ld-sub{color:var(--ink-3);font:500 11.5px var(--mono);letter-spacing:.01em;margin:7px 0 15px;word-break:break-word}
.ld-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;min-height:15px}
.ld-elapsed{font:600 12px var(--mono);color:var(--eco);letter-spacing:.02em}
.ld-hint{font:500 11px var(--sans);color:var(--ink-3);text-align:right;max-width:62%;opacity:0;transition:opacity .35s}
.ld-hint.on{opacity:1}

/* ---- общая дорожка: комета (indeterminate) + добивка до 100% по завершении ---- */
.ld-track{position:relative;height:6px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.07)}
.ld-track .ld-comet,.ld-track .ld-fill{position:absolute;inset:0;border-radius:6px}
.ld-comet{width:42%;background:linear-gradient(90deg,transparent,var(--eco-soft),var(--eco));
  box-shadow:0 0 14px var(--glow-eco);animation:ld-slide 1.25s cubic-bezier(.45,0,.55,1) infinite}
.ld-fill{transform:translateX(-101%);background:linear-gradient(90deg,var(--eco),var(--eco-soft));opacity:0}
.ld-done .ld-comet{opacity:0;transition:opacity .14s}
.ld-done .ld-fill{transform:translateX(0);opacity:1;transition:transform .2s ease,opacity .14s}

/* slim top-bar убран по запросу: все загрузки идут в центральном оверлее (информативнее) · skip-design-check */
/* ---- тонкий верхний бар-индикатор (frontend-design, направление A, утверждено пользователем): ambient eco-«комета»,
   тот же мотив, что у центрального лоадера; ловит ЛЮБУЮ загрузку, включая молчаливый фон-прогрев «все вкладки» · skip-design-check ---- */
.topload{position:fixed;left:0;right:0;top:0;height:4px;z-index:10000;overflow:hidden;
  background:rgba(61,220,132,.2);opacity:0;pointer-events:none;transition:opacity .2s ease;
  box-shadow:0 0 10px rgba(61,220,132,.25)}   /* видимая eco-база — бар-линия заметна даже когда комета ушла за край */
.topload.on{opacity:1}
.topload i{position:absolute;top:0;bottom:0;width:45%;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,transparent,var(--eco-soft),var(--eco));
  box-shadow:0 0 18px var(--glow-eco),0 0 8px var(--eco);
  animation:topslide 1.05s linear infinite}
@keyframes topslide{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.topload i{animation-duration:2.4s}}