/* ОТЧЁТ УК · вкладка (WF3) — профильные стили, scoped #screen-shareholder. */ /* Калька «Прибыли»: M2/M3/M4 + токены + .tabnum + .acts-sep (#screen-profit → */ /* #screen-shareholder, классы модулей 1:1). Весь M1 — в add-on shr-* ниже */ /* (HTML M1 переписан под инвест-карты). M1 НЕ sticky (донор 1:1). */ /* Донор→УК: донор M2→разрез(M3) · M3→точки(M3) · M4→каналы(M2); */ /* M1 УК — отдельным блоком ADD-ON shr-* ниже (инвест-карты). */ /* ═══════════════════════════════════════════════════════════════════ */ /* Локальные токены — в глобальном :root отсутствуют (есть только на экранах Аналитики). */ #screen-shareholder{ --success-text:#047857; --danger-text:#E11D48; --warn-text:#B45309; --watch:#38BDF8; --watch-soft:rgba(56,189,248,.12); } [data-theme="dark"] #screen-shareholder{ --success-text:#6EE7A5; --danger-text:#FCA5A5; --warn-text:#FCD34D; --watch:#38BDF8; --watch-soft:rgba(56,189,248,.16); } /* Контейнер вкладки (в приложении глобального .an2-page-лейаута нет — он scoped только под #screen-profit; повторяем для УК 1:1 с макетом .an2-page). */ #screen-shareholder .an2-page{display:flex;flex-direction:column;gap:24px;padding-top:20px;max-width:1440px;margin:0 auto;padding-left:32px;padding-right:32px} @media(max-width:560px){#screen-shareholder .an2-page{padding-left:16px;padding-right:16px}} #screen-shareholder .tabnum{font-variant-numeric:tabular-nums} #screen-shareholder .acts-sep{align-self:center;width:1px;height:20px;background:var(--border);margin:0 4px} /* Чипы периода + «Обсудить» всегда у правого края шапки модуля (калька донора «Прибыль»), в т.ч. при переносе на след. строку из-за широкой левой группы (разрез/вид) — M1/M2/M3. */ /* ── M2 · Прибыль в разрезе (калька-донор; в УК → M3 разрез-таблица сеть/партнёры) ── */ #screen-shareholder .m2-head-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap} #screen-shareholder .m2-tbl{display:flex;flex-direction:column;gap:6px;margin-top:10px} #screen-shareholder .m2-row{display:grid;grid-template-columns:1.8fr repeat(6,1fr) 1.1fr;gap:14px;align-items:center;padding:9px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2)} #screen-shareholder .m2-row.--head{background:transparent;border:none;padding:0 14px 2px} #screen-shareholder .m2-row.--head span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mutex)} #screen-shareholder .m2-ent{display:flex;align-items:center;gap:10px;min-width:0} #screen-shareholder .m2-mark{width:30px;height:30px;border-radius:8px;background:var(--brand-gradient);color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px;flex-shrink:0} #screen-shareholder .m2-ent b{font-size:13.5px;font-weight:800;display:block;line-height:1.2} #screen-shareholder .m2-ent small{font-size:11px;color:var(--muted);font-weight:600} #screen-shareholder .m2-v{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right} #screen-shareholder .m2-v small{display:block;font-size:10px;color:var(--mutex);font-weight:700;margin-top:1px} #screen-shareholder .m2-v.--pos{color:var(--success-text)} #screen-shareholder .m2-v.--neg{color:var(--danger-text)} #screen-shareholder .m2-nm{font-size:13px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} #screen-shareholder .m2-nm b{color:var(--success-text)} #screen-shareholder .m2-nm s{color:var(--danger-text);text-decoration:none} #screen-shareholder .m2-head-num{text-align:right} /* ── M3 · Точки по прибыли (калька-донор; в УК → M3 режим «Точки») ── */ #screen-shareholder .m3-filters{display:flex;flex-direction:column;gap:9px;margin-bottom:4px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm)} #screen-shareholder .fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #screen-shareholder .fgroup>.flabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mutex);width:74px;flex-shrink:0} #screen-shareholder .fchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap} #screen-shareholder .fchip{font-family:inherit;font-size:12px;font-weight:600;color:var(--text-2);background:transparent;border:1px solid var(--border);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap} #screen-shareholder .fchip:hover{border-color:var(--accent);color:var(--accent)} #screen-shareholder .fchip.is-active{background:var(--accent-soft-2);border-color:var(--accent);color:var(--accent);font-weight:700} #screen-shareholder .fchip.--primary.is-active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700} #screen-shareholder .m3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px} #screen-shareholder .pt{border:1px solid var(--border);border-radius:15px;padding:15px 16px;background:var(--surface-2);display:flex;flex-direction:column;gap:11px} #screen-shareholder .pt.--neg{border-color:var(--danger);background:var(--danger-soft)} #screen-shareholder .pt__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} #screen-shareholder .pt__rank{font-size:13px;font-weight:800;color:var(--mutex);font-variant-numeric:tabular-nums} #screen-shareholder .pt__loc{flex:1;padding:0 8px} #screen-shareholder .pt__loc b{font-size:14px;font-weight:800;display:block;line-height:1.2} #screen-shareholder .pt__loc small{font-size:11px;color:var(--muted);font-weight:600} #screen-shareholder .pt__status{font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px} #screen-shareholder .pt__status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor} #screen-shareholder .pt__status.--stable{color:var(--success-text);background:var(--success-soft)} #screen-shareholder .pt__status.--watch{color:var(--watch);background:var(--watch-soft)} #screen-shareholder .pt__status.--warn{color:var(--warn-text);background:var(--warn-soft)} #screen-shareholder .pt__main{display:flex;align-items:baseline;gap:10px} #screen-shareholder .pt__profit{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} #screen-shareholder .pt__profit.--pos{color:var(--success-text)} #screen-shareholder .pt__profit.--neg{color:var(--danger-text)} #screen-shareholder .pt__rent{font-size:13px;font-weight:800;color:var(--text-2)} #screen-shareholder .pt__meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:11.5px;color:var(--muted);font-weight:600} #screen-shareholder .pt__meta b{color:var(--text-2);font-weight:800} #screen-shareholder .pt__pf{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--muted)} #screen-shareholder .pt__pfbar{flex:1;height:6px;background:var(--surface-3);border-radius:4px;overflow:hidden} #screen-shareholder .pt__pfbar i{display:block;height:100%;border-radius:4px} #screen-shareholder .pt__rr{font-size:11.5px;font-weight:700;color:var(--text-2)} #screen-shareholder .pt__rr b{font-variant-numeric:tabular-nums} #screen-shareholder .pt__err{font-size:11.5px;font-weight:700;color:var(--warn-text);display:flex;align-items:center;gap:5px} #screen-shareholder .pt__foot{display:flex;gap:8px;margin-top:2px} #screen-shareholder .pt__foot button:not(.btn-ai){font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px;border:1px solid var(--border);color:var(--text-2);background:var(--surface);cursor:pointer} #screen-shareholder .pt__foot .btn-ai{padding:6px 12px;font-size:11px} #screen-shareholder .m3-foot{display:flex;gap:10px;justify-content:center;margin-top:16px} #screen-shareholder .m3-more,#screen-shareholder .m3-less{font-size:12.5px;font-weight:700;padding:9px 18px;border-radius:10px;cursor:pointer} #screen-shareholder .m3-more{color:var(--accent);background:var(--accent-soft);border:none} #screen-shareholder .m3-more:disabled{opacity:.45;cursor:default} #screen-shareholder .m3-less{color:var(--text-2);background:var(--surface);border:1px solid var(--border)} /* M3 · вид-режим «таблица» (смарт-таблица; та же логика/данные, что плитки) */ #screen-shareholder .m3-view{gap:4px} #screen-shareholder .m3-tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-sm);margin-top:2px} #screen-shareholder .pt-tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:940px} #screen-shareholder .pt-tbl th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mutex);text-align:left;padding:10px 11px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)} #screen-shareholder .pt-tbl th[data-sort]{cursor:pointer;user-select:none} #screen-shareholder .pt-tbl th[data-sort]:hover{color:var(--accent)} #screen-shareholder .pt-tbl th[aria-sort]{color:var(--accent)} #screen-shareholder .pt-tbl th.--num,#screen-shareholder .pt-tbl td.--num{text-align:right;font-variant-numeric:tabular-nums} #screen-shareholder .pt-tbl td{padding:9px 11px;border-bottom:1px solid var(--border-2);vertical-align:middle;color:var(--text)} #screen-shareholder .pt-tbl tbody tr:last-child td{border-bottom:none} #screen-shareholder .pt-tbl tbody tr:hover td{background:var(--surface-2)} #screen-shareholder .pt-tbl tr.--neg td{background:var(--danger-soft)} #screen-shareholder .pt-tr__rank{color:var(--mutex);font-weight:800;font-variant-numeric:tabular-nums;width:34px} #screen-shareholder .pt-tr__loc{display:flex;align-items:center;gap:9px;min-width:0} #screen-shareholder .pt-tr__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} #screen-shareholder .pt-tr__dot.--stable{background:var(--success)} #screen-shareholder .pt-tr__dot.--watch{background:var(--watch)} #screen-shareholder .pt-tr__dot.--warn{background:var(--warn)} #screen-shareholder .pt-tr__locn b{font-weight:800} #screen-shareholder .pt-tr__locn small{color:var(--muted);font-weight:600} #screen-shareholder .pt-tr__err{color:var(--warn-text);font-weight:800;margin-left:5px;cursor:help} #screen-shareholder .pt-tbl td.pt-tr--pos{color:var(--success-text);font-weight:800} #screen-shareholder .pt-tbl td.pt-tr--neg{color:var(--danger-text);font-weight:800} #screen-shareholder .pt-pf{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end} #screen-shareholder .pt-pf__bar{width:46px;height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden;flex-shrink:0} #screen-shareholder .pt-pf__bar i{display:block;height:100%;border-radius:3px} #screen-shareholder .pt-act{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap} #screen-shareholder .pt-act button:not(.btn-ai){font-size:11px;font-weight:700;padding:5px 9px;border-radius:7px;border:1px solid var(--border);color:var(--text-2);background:var(--surface);cursor:pointer} #screen-shareholder .pt-act .btn-ai{padding:5px 10px;font-size:11px} /* ── M4 · Как складывается прибыль (водопад + donut) (калька-донор; в УК → M2 «3 канала») ── */ #screen-shareholder .m4-sub2{display:flex;gap:8px;margin-bottom:2px;flex-wrap:wrap} #screen-shareholder .m4-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:28px} @media(max-width:880px){#screen-shareholder .m4-grid{grid-template-columns:1fr}} #screen-shareholder .wf{display:flex;flex-direction:column;gap:6px} #screen-shareholder .wf-row{display:grid;grid-template-columns:140px 1fr 168px;gap:10px;align-items:center;font-size:12.5px} #screen-shareholder .wf-row b{font-weight:700;color:var(--text-2)} #screen-shareholder .wf-track{height:24px;background:var(--surface-3);border-radius:6px;position:relative;overflow:hidden} #screen-shareholder .wf-fill{position:absolute;top:0;bottom:0;border-radius:5px} #screen-shareholder .wf-fill.--rev{background:var(--accent)} #screen-shareholder .wf-fill.--cost{background:var(--danger);opacity:.8} #screen-shareholder .wf-fill.--ebit{background:var(--success)} #screen-shareholder .wf-fill.--gross{background:var(--blue);opacity:.85} #screen-shareholder .wf-amt{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap} #screen-shareholder .wf-amt small{color:var(--mutex);font-weight:700} #screen-shareholder .wf-row.--total b,#screen-shareholder .wf-row.--total .wf-amt{font-weight:800} #screen-shareholder .wf-row.--total{padding:5px 0;border-top:1px dashed var(--border);margin-top:2px} #screen-shareholder .donut-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px} #screen-shareholder .note{font-size:11.5px;color:var(--muted);font-weight:600;margin-top:6px;padding:10px 13px;background:var(--surface-2);border-radius:10px;border:1px solid var(--border)} /* ─────────── ADD-ON shr-* (новые элементы вкладки УК) ─────────── */ /* M1 add-on: инвест-карты + дельта */ #screen-shareholder .shr-m1__grid{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:stretch} @media(max-width:880px){#screen-shareholder .shr-m1__grid{grid-template-columns:1fr}} #screen-shareholder .shr-m1-hero{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:18px;justify-content:center} #screen-shareholder .shr-m1-hero__num{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} #screen-shareholder .shr-m1-hero__num small{font-size:20px;color:var(--muted)} #screen-shareholder .shr-m1-hero__cap{font-size:12.5px;font-weight:600;color:var(--muted)} #screen-shareholder .shr-m1-hero__delta{font-size:12px;font-weight:800;width:max-content;padding:3px 10px;border-radius:999px;background:var(--surface)} #screen-shareholder .shr-m1-hero__delta.--pos{color:var(--success-text)} #screen-shareholder .shr-m1-hero__delta.--neg{color:var(--danger)} #screen-shareholder .shr-m1__right{display:flex;flex-direction:column;gap:14px;min-width:0;justify-content:center} #screen-shareholder .shr-m1-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} #screen-shareholder .shr-inv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 15px} #screen-shareholder .shr-inv-card__l{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em} #screen-shareholder .shr-inv-card__v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px} #screen-shareholder .shr-inv-card__v small{font-size:13px;color:var(--muted)} #screen-shareholder .shr-inv-card__sub{font-size:11px;color:var(--mutex);font-weight:700;margin-top:2px} #screen-shareholder .shr-inv-card--green{border-color:var(--success)} #screen-shareholder .shr-inv-card--yellow{border-color:var(--warn)} #screen-shareholder .shr-inv-card--red{border-color:var(--danger)} #screen-shareholder .shr-m1-points{font-size:13px;font-weight:600;border-top:1px solid var(--border-2);padding-top:11px} /* M2 add-on: тренд (накопительные столбики, левый край, цифра в млн сверху) + тултип */ #screen-shareholder .shr-trend{margin-top:16px;border-top:1px solid var(--border-2);padding-top:14px} #screen-shareholder .shr-trend__head{font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:14px} #screen-shareholder .shr-trend__chart{display:flex;align-items:flex-end;justify-content:flex-start;gap:22px;padding-left:2px} #screen-shareholder .shr-tr-col{width:48px;display:flex;flex-direction:column;align-items:center} #screen-shareholder .shr-tr-val{font-size:11px;font-weight:800;color:var(--text-2);margin-bottom:6px;font-variant-numeric:tabular-nums} #screen-shareholder .shr-tr-bar{width:100%;display:flex;flex-direction:column;border-radius:6px 6px 0 0;overflow:hidden;min-height:4px} #screen-shareholder .shr-tr-bar i{display:block;width:100%} #screen-shareholder .shr-tr-x{font-size:11px;color:var(--muted);font-weight:700;margin-top:7px} #screen-shareholder .shr-tr-bar i.--forecast{background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 3px,transparent 3px,transparent 6px);border-bottom:1.5px dashed var(--mutex)} #screen-shareholder .shr-tr-col.--now{position:relative} #screen-shareholder .shr-tr-col.--now .shr-tr-x{color:var(--accent);font-weight:800} #screen-shareholder .shr-tr-now{position:absolute;left:-8px;right:-8px;bottom:-19px;font-size:9px;font-weight:800;color:var(--accent);text-align:center;line-height:1.2} #screen-shareholder .shr-trend__leg{display:flex;gap:16px;margin-top:14px;font-size:11px;color:var(--muted);font-weight:700} #screen-shareholder .shr-trend__leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle} /* ОРФАН (зум 2026-06-08): прежняя двухколоночная вёрстка «тренд + записка справа». После доработки тренд стал полноширинным (.shr-trend__chart), а записку вынесли вниз модуля отдельным блоком m2Note() (.an-note.shr-mod-note). Правила ниже больше НЕ вызываются (грэп: только это определение). Не удалены намеренно — помечены маркером (канон: осиротевшее метим, не режем). */ #screen-shareholder .shr-trend__body{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap} #screen-shareholder .shr-trend__left{flex:0 0 auto} #screen-shareholder .shr-note{flex:1 1 320px;min-width:0} #screen-shareholder .an-note{background:var(--surface-2);border:1px solid var(--border-2);border-left:3px solid var(--accent);border-radius:14px;padding:16px 18px} #screen-shareholder .an-note-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px;flex-wrap:wrap} #screen-shareholder .an-note-title{font-size:13.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px} #screen-shareholder .an-note-title .ic{color:var(--accent)} #screen-shareholder .an-note-lead{font-size:13px;line-height:1.65;color:var(--text-2)} #screen-shareholder .an-note-lead b{color:var(--text);font-weight:800} #screen-shareholder .an-note-lead b.pos{color:var(--success);font-weight:800} #screen-shareholder .an-note-lead b.neg{color:var(--danger);font-weight:800} #screen-shareholder .an-note-foot{display:flex;justify-content:flex-end;margin-top:13px} #screen-shareholder .btn-ai.btn-ai-sm{padding:6px 11px;font-size:11.5px} #screen-shareholder .shr-mod-note{margin-top:16px} /* W3 · «Наблюдения за период» (B · 2 колонки pos/neg) · реюз донор-паттерна .an-obs (V400 · Аналитика, renderPeriodObservations) */ #screen-shareholder .an-submodule{margin-top:18px;padding-top:18px;border-top:1px dashed var(--border)} #screen-shareholder .an-obs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} #screen-shareholder .an-obs-col{background:var(--surface-2);border:1px solid var(--border-2);border-radius:14px;padding:14px 16px} #screen-shareholder .an-obs-col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px;flex-wrap:wrap} #screen-shareholder .an-obs-col-title{font-size:12.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px} #screen-shareholder .an-obs-col.--neg .an-obs-col-title{color:var(--danger)} #screen-shareholder .an-obs-col.--pos .an-obs-col-title{color:var(--success)} #screen-shareholder .an-obs-col-sub{font-size:10.5px;color:var(--muted);margin-bottom:12px} #screen-shareholder .an-obs-list{display:flex;flex-direction:column;gap:11px} #screen-shareholder .an-obs-item{display:flex;align-items:flex-start;gap:10px} #screen-shareholder .an-obs-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;margin-top:6px} #screen-shareholder .an-obs-col.--neg .an-obs-dot{background:var(--danger)} #screen-shareholder .an-obs-col.--pos .an-obs-dot{background:var(--success)} #screen-shareholder .an-obs-item-t{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:2px} #screen-shareholder .an-obs-item-d{font-size:11px;color:var(--muted);line-height:1.45} #screen-shareholder .an-obs-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px} #screen-shareholder .shr-obs-btn{font-size:12px;font-weight:700;padding:7px 14px;border-radius:9px;cursor:pointer;color:var(--accent);background:var(--accent-soft);border:none} #screen-shareholder .shr-obs-btn.--less{color:var(--text-2);background:var(--surface);border:1px solid var(--border)} @media(max-width:720px){#screen-shareholder .an-obs-grid{grid-template-columns:1fr}} #screen-shareholder .shr-tip{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--surface);border:1px solid var(--border);font-size:10px;color:var(--muted);cursor:help;position:relative} #screen-shareholder .shr-tip:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:130%;transform:translateX(-50%);width:240px;background:var(--text);color:var(--surface);font-size:11px;font-weight:600;line-height:1.4;padding:8px 10px;border-radius:8px;z-index:20;white-space:normal} /* M3 add-on: вердикт-подсветка ячейки/контекста */ #screen-shareholder .shr-verdict--green{color:var(--success-text)} #screen-shareholder .shr-verdict--yellow{color:var(--warn)} #screen-shareholder .shr-verdict--red{color:var(--danger)} #screen-shareholder .shr-ctx--green{color:var(--success-text)} #screen-shareholder .shr-ctx--yellow{color:var(--warn)} #screen-shareholder .shr-ctx--red{color:var(--danger)} /* вердикт-рамка/фон M1-секции (калька pf-m1 → shr-m1) */ #screen-shareholder .an2-block.shr-m1{transition:border-color .25s ease,background-color .25s ease} #screen-shareholder .shr-m1.is-verdict-green{border-color:var(--success);background:linear-gradient(0deg,var(--success-soft),var(--success-soft)),var(--surface)} #screen-shareholder .shr-m1.is-verdict-yellow{border-color:var(--warn);background:linear-gradient(0deg,var(--warn-soft),var(--warn-soft)),var(--surface)} #screen-shareholder .shr-m1.is-verdict-red{border-color:var(--danger);background:linear-gradient(0deg,var(--danger-soft),var(--danger-soft)),var(--surface)} /* M3 таблица агрегата: 9 колонок (1:1 .m2-row, +Приб./точку — зум 2026-06-08) */ #screen-shareholder .m2-row{grid-template-columns:1.6fr repeat(8,1fr)} #screen-shareholder .m2-row.--head{grid-template-columns:1.6fr repeat(8,1fr)} /* ── M1: цвет дельты «к прошлому месяцу» (зум 2026-06-08) ── */ #screen-shareholder .shr-inv-card__sub.--pos{color:var(--success-text)} #screen-shareholder .shr-inv-card__sub.--neg{color:var(--danger)} /* ── Тренд 12 мес: горизонтальный скролл при узком вьюпорте ── */ #screen-shareholder .shr-trend__chart{gap:14px;overflow-x:auto;padding-bottom:22px} /* ── Модуль «Динамика» (зум 2026-06-08): KPI-карты + combo-чарт ── */ #screen-shareholder .dyn-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:2px 0 14px} @media(max-width:880px){#screen-shareholder .dyn-kpis{grid-template-columns:repeat(2,1fr)}} #screen-shareholder .dyn-kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 15px} #screen-shareholder .dyn-kpi__l{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em} #screen-shareholder .dyn-kpi__v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:4px} #screen-shareholder .dyn-kpi__v small{font-size:12px;color:var(--muted);font-weight:700} #screen-shareholder .dyn-kpi__d{font-size:11.5px;font-weight:700;margin-top:3px;color:var(--mutex)} #screen-shareholder .dyn-kpi__d.--pos{color:var(--success-text)} #screen-shareholder .dyn-kpi__d.--neg{color:var(--danger)} #screen-shareholder .dyn-chart{margin-top:4px;border:1px solid var(--border-2);border-radius:var(--r-sm);padding:14px 12px 6px;background:var(--surface)} #screen-shareholder .dyn-leg{display:flex;gap:18px;margin-top:10px;font-size:11.5px;color:var(--muted);font-weight:700} #screen-shareholder .dyn-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:middle} /* placeholder-текст записки до загрузки (real data) */ #screen-shareholder .shr-note-ph{color:var(--mutex);font-style:italic} /* base block layout (в приложении эти .an2-block* scoped только под #screen-profit — переносим под shareholder, иначе шапка валится в столбик) */ #screen-shareholder .an2-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px 22px;display:flex;flex-direction:column;gap:14px} #screen-shareholder .an2-block__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap} #screen-shareholder .an2-block__title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em;margin:0} #screen-shareholder .an2-block__sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:3px} #screen-shareholder .an2-block__actions{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}