/* Демо «Дашборд диагностики». Токены совпадают с основным сайтом (вариант A). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:optional;
  src:url("../fonts/Inter-var-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:optional;
  src:url("../fonts/Inter-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:optional;
  src:url("../fonts/Inter-var-symbols.woff2") format("woff2");
  unicode-range:U+20BD,U+2192}

:root{
  /* Светлая тема (решение владельца 02.10.2026, образец site/preview/light.css): фон #FFFFFF и #F5F7FA,
     текст #1E293B, вторичный #475569, акцент #1D4ED8. Имена прежние: их читают app.js для графиков.
     --c-surface фон страницы, --c-bg фон карточек и панелей. */
  color-scheme:light;
  --c-bg:#FFFFFF;
  --c-surface:#F5F7FA;
  --c-surface-2:#EEF2F7;
  --c-panel:#F8FAFC;
  --c-text:#1E293B;
  --c-heading:#0F172A;
  --c-muted:#475569;
  --c-accent:#1D4ED8;
  --c-accent-hover:#1E40AF;
  --c-accent-soft:#60A5FA;
  --c-accent-pale:#93C5FD;
  --c-on-accent:#FFFFFF;
  --c-tint:#EFF6FF;
  --c-tint-border:#BFDBFE;
  --c-border:#E2E8F0;
  --c-border-strong:#64748B;
  --c-loss:#B91C1C;
  --c-loss-soft:#FEE2E2;
  --c-gain:#15803D;
  --c-gain-soft:#DCFCE7;
  --c-neutral:#64748B;
  --c-amber:#92400E;
  --c-warn-bg:#FEF3C7;
  --c-warn-text:#713F12;
  --c-warn-border:#F59E0B;
  --c-focus:#1D4ED8;
  --c-shadow:0 1px 2px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.06);
  --f-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Шкала шрифтов: не больше пяти размеров на странице, ничего смыслового мельче 16 px */
  --fs-small:16px;
  --fs-base:17px;
  --fs-eyebrow:16px;
  --fs-h2:20px;
  --fs-h1:clamp(26px,3.4vw,34px);
  --fs-kpi:clamp(28px,3vw,34px);
  --lh-text:1.55;
  --maxw:1240px;
  --gutter:16px;
  --sp-1:8px;--sp-2:12px;--sp-3:16px;--sp-4:24px;--sp-5:32px;--sp-6:48px;
  --radius:10px;--radius-sm:8px;
  --btn-h:48px;
  --badge-h:48px;
  --chart-h:300px;
}
@media (min-width:900px){
  :root{--fs-base:18px;--fs-h2:22px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--badge-h) + 8px)}
body{margin:0;background:var(--c-surface);color:var(--c-text);font-family:var(--f-sans);font-size:var(--fs-base);line-height:var(--lh-text);font-feature-settings:"tnum" 1}
h1,h2,h3{margin:0;line-height:1.2;overflow-wrap:anywhere;color:var(--c-heading)}
h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-0.01em}
h2{font-size:var(--fs-h2);font-weight:600}
p{margin:0}
a{color:var(--c-accent)}
a:focus-visible,button:focus-visible,select:focus-visible,.table-wrap:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
/* Без скачков при загрузке: содержимое, которое дорисовывает app.js, видно только после первой отрисовки.
   visibility не меняет раскладку, поэтому её появление не считается сдвигом. Класс ставит скрипт в head, снимает app.js. */
.demo-loading .filters .wrap,.demo-loading main{visibility:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.muted{color:var(--c-muted)}
.small{font-size:var(--fs-small)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Плашка демонстрации: закреплена сверху */
.demo-badge{position:sticky;top:0;z-index:50;min-height:var(--badge-h);background:var(--c-warn-bg);color:var(--c-warn-text);border-bottom:2px solid var(--c-warn-border);display:flex;align-items:center}
.demo-badge{font-size:var(--fs-small)}
.demo-badge .wrap{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);align-items:center;justify-content:space-between;padding-top:6px;padding-bottom:6px;width:100%}
.demo-badge .wrap > span{flex:1 1 320px;min-width:0}
.demo-badge a{flex:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:32px}
.demo-badge strong{font-weight:600}
.demo-badge a{color:var(--c-warn-text);font-weight:500}

/* Шапка */
.head{background:var(--c-bg);border-bottom:1px solid var(--c-border);padding:var(--sp-4) 0}
.head .wrap{display:grid;gap:var(--sp-3)}
.head p{max-width:70ch;color:var(--c-muted)}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:500;color:var(--c-muted);text-transform:uppercase;letter-spacing:.06em}

/* Фильтры */
.filters{background:var(--c-bg);border-bottom:1px solid var(--c-border);padding:var(--sp-3) 0}
.filters .wrap{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);align-items:flex-end}
.field{display:grid;gap:4px;min-width:0}
.field label{font-size:var(--fs-small);color:var(--c-muted);font-weight:500}
.field select{font:inherit;min-height:var(--btn-h);padding:0 var(--sp-2);border:1px solid var(--c-border-strong);border-radius:var(--radius-sm);background:var(--c-bg);color:var(--c-text);min-width:220px;max-width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--sp-4);border-radius:var(--radius-sm);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s}
.btn-primary{background:var(--c-accent);color:var(--c-on-accent);border-color:var(--c-accent)}
.btn-primary:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}
.btn-ghost{background:var(--c-bg);color:var(--c-accent);border-color:var(--c-border-strong)}
.btn-ghost:hover{border-color:var(--c-accent)}
.filters .note{font-size:var(--fs-small);color:var(--c-muted);flex-basis:100%}

/* Показатели */
.kpis{padding:var(--sp-4) 0 0}
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
.kpi{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-3) var(--sp-2)}
.kpi-num{display:block;font-size:var(--fs-kpi);font-weight:700;line-height:1.1;letter-spacing:-0.02em;color:var(--c-accent);overflow-wrap:break-word}
.kpi-num.loss{color:var(--c-loss)}
.kpi-num.gain{color:var(--c-gain)}
.kpi-label{display:block;font-size:var(--fs-small);color:var(--c-muted);margin-top:4px}
.kpi-sub{display:block;font-size:var(--fs-small);margin-top:var(--sp-1)}

/* Вывод */
.insight{margin-top:var(--sp-3);background:var(--c-tint);color:var(--c-heading);border:1px solid var(--c-accent);border-left-width:4px;border-radius:var(--radius);padding:var(--sp-3) var(--sp-4)}
.insight .eyebrow{color:var(--c-accent)}
.insight p{margin-top:4px;max-width:80ch}

/* Сетка графиков */
.grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-4) 0}
.card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3);min-width:0;display:grid;gap:var(--sp-2);align-content:start}
.card-head{display:grid;gap:4px}
.card-head p{font-size:var(--fs-base);color:var(--c-muted);max-width:70ch}
.chart-box{position:relative;height:var(--chart-h);min-width:0}
.chart-box canvas{max-width:100%}
.card-foot{font-size:var(--fs-small);color:var(--c-muted)}

/* Таблица */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-bg)}
.table-hint{display:none;font-size:var(--fs-small);color:var(--c-muted)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:var(--fs-small)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--c-border);vertical-align:top}
th{background:var(--c-surface-2);font-weight:600;color:var(--c-muted);white-space:nowrap;position:sticky;top:0}
td:nth-child(2){white-space:nowrap}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td .loss{color:var(--c-loss);font-weight:600}
.tag{display:inline-block;font-size:var(--fs-small);font-weight:600;padding:2px 8px;border-radius:999px;background:var(--c-surface-2);color:var(--c-muted);white-space:nowrap}
.tag.churn{background:var(--c-loss-soft);color:var(--c-loss)}
.tag.drop{background:var(--c-warn-bg);color:var(--c-warn-text)}
.prio{display:inline-block;min-width:28px;text-align:center;font-weight:700;border-radius:var(--radius-sm);background:var(--c-accent);color:var(--c-on-accent);padding:2px 6px}
tbody tr:hover td{background:var(--c-surface-2)}

/* Подвал демо */
.demo-cta{background:var(--c-bg);border-top:1px solid var(--c-border);padding:var(--sp-5) 0}
.demo-cta .wrap{display:grid;gap:var(--sp-3);justify-items:start}
.demo-cta p{max-width:70ch;color:var(--c-muted)}
.demo-cta .btn{width:100%}
.foot{padding:var(--sp-4) 0;font-size:var(--fs-small);color:var(--c-muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}

/* Телефон: таблица шире экрана. Столбец с названием (td.lead) и ключевой (td.key, th.key) закреплены по краям,
   середина прокручивается внутри блока, над таблицей подсказка. */
@media (max-width:639.98px){
  .table-hint{display:block}
  table{min-width:640px}
  th.lead,td.lead{position:sticky;left:0;z-index:1;background:var(--c-bg);box-shadow:6px 0 8px -4px rgba(15,23,42,.14);white-space:normal;min-width:120px;max-width:150px}
  td:last-child:not(.key){min-width:260px}
  th.lead{z-index:2;background:var(--c-surface-2)}
  th.key,td.key{position:sticky;right:0;z-index:1;background:var(--c-bg);box-shadow:-6px 0 8px -4px rgba(15,23,42,.14)}
  th.key{z-index:2;background:var(--c-surface-2)}
  .field select{min-width:0;width:100%}
  .filters .field{flex:1 1 100%}
}
@media (min-width:640px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .demo-cta .btn{width:auto}
}
@media (min-width:900px){
  .kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.wide{grid-column:1 / -1}
  :root{--chart-h:340px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* Общие элементы демо 2 и 3 */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.chip{font:inherit;font-size:var(--fs-small);font-weight:500;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--c-border-strong);background:var(--c-bg);color:var(--c-text);cursor:pointer;transition:background .15s,border-color .15s}
.chip[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.chip:hover{border-color:var(--c-accent)}
.tag.up{background:var(--c-gain-soft);color:var(--c-gain)}
.delta-up{color:var(--c-gain);font-weight:600}

/* Понятность демо (замечания владельца 01.10.2026): строка «Что здесь можно сделать»,
   одно подсвеченное главное действие с подсказкой, ссылки к соседним демо внизу. */
.demo-howto{background:var(--c-tint);border-bottom:1px solid var(--c-tint-border);padding:12px 0}
.demo-howto .wrap{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.demo-howto b{color:var(--c-accent);font-weight:600;white-space:nowrap}
.demo-howto span{color:var(--c-heading)}

.btn-main{min-height:58px;padding:0 28px;font-size:var(--fs-base);font-weight:700;border-radius:12px;position:relative}
.btn-main.is-calling{animation:demo-pulse 1.6s ease-in-out infinite}
@keyframes demo-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(29,78,216,.5),0 8px 24px rgba(29,78,216,.2)}
  50%{box-shadow:0 0 0 12px rgba(29,78,216,0),0 8px 24px rgba(29,78,216,.3)}
}
.demo-hint{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600;color:var(--c-accent)}
.demo-hint::before{content:"";width:10px;height:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex:none}
.demo-hint.is-off{visibility:hidden}
.demo-hint.is-auto{color:var(--c-amber)}
.demo-hint.is-auto::before{display:none}
@media (max-width:639.98px){
  .demo-hint::before{transform:rotate(135deg)}
}

.demo-pager{border-top:1px solid var(--c-border);background:var(--c-bg);padding:var(--sp-4) 0}
.demo-pager .wrap{display:grid;grid-template-columns:1fr;gap:var(--sp-2)}
.demo-pager a{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 18px;border:1px solid var(--c-border-strong);border-radius:12px;text-decoration:none;color:var(--c-heading);background:var(--c-bg);transition:border-color .15s,background .15s}
.demo-pager a:hover{border-color:var(--c-accent);background:var(--c-tint)}
.demo-pager a:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.demo-pager small{display:block;font-size:var(--fs-small);color:var(--c-muted);font-weight:500}
.demo-pager strong{display:block;font-weight:600}
.demo-pager a::before,.demo-pager a::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent)}
.demo-pager .prev::before{transform:rotate(135deg)}
.demo-pager .prev::after{display:none}
.demo-pager .next{justify-content:space-between;text-align:right}
.demo-pager .next::before{display:none}
.demo-pager .next::after{transform:rotate(-45deg)}
@media (min-width:640px){
  .demo-pager .wrap{grid-template-columns:1fr 1fr}
  .demo-pager .next{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .btn-main.is-calling{animation:none;box-shadow:0 0 0 3px rgba(29,78,216,.5)}
}

/* Тёмная тема по кнопке в полосе «Демонстрация» (04.10.2026, решение владельца): только переменные.
   Жёлтая полоса «Демонстрация» одинаково заметна в обеих темах. Графики читают эти же переменные
   и перерисовываются по событию «themechange» (см. app.js). */
html[data-theme="dark"]{
  color-scheme:dark;
  --c-bg:#152038;
  --c-surface:#0B1220;
  --c-surface-2:#1B2742;
  --c-panel:#111B30;
  --c-text:#E6EAF2;
  --c-heading:#F4F6FA;
  --c-muted:#CBD5E1;
  --c-accent:#93C5FD;
  --c-accent-hover:#BFDBFE;
  --c-accent-soft:#60A5FA;
  --c-accent-pale:#2563EB;
  --c-on-accent:#0B1220;
  --c-tint:rgba(147,197,253,.14);
  --c-tint-border:#4B6A9B;
  --c-border:#2C3C5E;
  --c-border-strong:#8492AC;
  --c-loss:#FCA5A5;
  --c-loss-soft:rgba(252,165,165,.16);
  --c-gain:#4ADE80;
  --c-gain-soft:rgba(74,222,128,.16);
  --c-neutral:#94A3B8;
  --c-amber:#FCD34D;
  --c-focus:#BFDBFE;
  --c-shadow:0 0 0 1px #2C3C5E,0 4px 12px rgba(0,0,0,.35);
}
html[data-theme="dark"] th.lead,html[data-theme="dark"] td.lead,html[data-theme="dark"] th.key,html[data-theme="dark"] td.key{box-shadow:none}
.demo-badge-actions{display:inline-flex;align-items:center;gap:var(--sp-2);flex:none}
.demo-badge .theme-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;flex:none}
.theme-js .demo-badge .theme-toggle{display:inline-flex}
.demo-badge .theme-toggle:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.theme-toggle svg{width:22px;height:22px}
.theme-toggle .ico-sun{display:none}
html[data-theme="dark"] .theme-toggle .ico-sun{display:block}
html[data-theme="dark"] .theme-toggle .ico-moon{display:none}