/* ==========================================================================
   ПЛАТФОРМА ТРЕКИНГА — дизайн-система «Б. Светлый современный»
   Единственный источник правды. Экраны собираются только из этих классов.

   Правила системы:
   1. Фон страницы #F4F5F8, рабочая поверхность — белая карточка.
   2. Единственный акцент — кобальт #1F45FF. Оранжевый и зелёный только
      для статусов «просрочено» и «сдано», не для украшения.
   3. На экране одно тёмное пятно — карточка .tcd. Больше одного не ставить.
   4. Jost — только дисплейные надписи (44-64 px) и числа. Текст — Montserrat.
   5. Знак ₸ набирается Montserrat: в Jost его нет (класс .kzt).
   6. Радиусы: 30 — герой, 24 — карточка, 20 — строка, 100 — пилюля.
   7. Рейка .mr — показатель, у которого есть А и Б. Полоса .bar — доля.
   ========================================================================== */

@font-face{font-family:Jost;src:url('/fonts/Jost.ttf') format('truetype');font-weight:100 900;font-style:normal}
@font-face{font-family:Mont;src:url('/fonts/Montserrat-Regular.ttf') format('truetype');font-weight:400}
@font-face{font-family:Mont;src:url('/fonts/Montserrat-Medium.ttf') format('truetype');font-weight:500}
@font-face{font-family:Mont;src:url('/fonts/Montserrat-SemiBold.ttf') format('truetype');font-weight:600}

:root{
  --bg:#F4F5F8;
  --card:#FFFFFF;
  --ink:#0D1017;
  --mut:#5F6674;      /* вторичный текст: 5,8:1 на белом, 5,3:1 на фоне */
  --mut2:#646B79;     /* подписи над числом: 5,4:1 на белом */
  --line:#E4E7ED;
  --ac:#1F45FF;       /* кобальт: 6,3:1 на белом */
  --ac-s:#EDF0FF;
  --warm:#BE3A10;     /* просрочено, текст: 5,5:1 на белом, 4,9:1 на плашке */
  --warm-s:#FFEFE9;
  --ok:#0C7350;       /* сдано, текст: 5,9:1 на белом, 5,1:1 на плашке */
  --ok-s:#E4F3EC;
  --shadow:0 2px 3px rgba(16,20,35,.03), 0 14px 34px rgba(16,20,35,.05);
  --shadow-s:0 1px 2px rgba(16,20,35,.03), 0 6px 18px rgba(16,20,35,.04);
}

*{box-sizing:border-box;margin:0;padding:0}
body{width:100%;min-width:320px;background:var(--bg);color:var(--ink);
  font-family:Mont,sans-serif;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.j{font-family:Jost,Mont,sans-serif}
.kzt{font-family:Mont,sans-serif}   /* знака тенге в Jost нет */

.app{display:grid;grid-template-columns:274px 1fr;min-height:100vh;align-items:stretch}

/* ---------- левая панель ---------- */
.side{background:var(--card);padding:36px 0 28px;display:flex;flex-direction:column}
.brand{padding:0 26px 30px}
.bt{font-family:Jost,Mont,sans-serif;font-weight:500;font-size:25px;line-height:1.1;letter-spacing:-.01em}
.bs{font-size:12px;color:var(--mut2);margin-top:8px;font-weight:500}
.nav{padding:0 14px;display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--mut);
  font-size:14px;font-weight:500;border-radius:14px;text-decoration:none;line-height:1.2}
.nav a svg{flex:0 0 18px}
.nav a.on{background:var(--ac);color:#fff}
.side-foot{margin-top:auto;padding:0 20px}
.tcard{background:var(--ac-s);border-radius:20px;padding:18px 20px}
.fl{font-size:12px;color:var(--ac);font-weight:600}
.fn{font-family:Jost,Mont,sans-serif;font-size:19px;font-weight:500;margin-top:8px;line-height:1.15}
.fr{font-size:12px;color:var(--mut);margin-top:5px;font-weight:500}

/* ---------- шапка экрана ---------- */
.main{padding:34px 44px 44px;min-width:0}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:24px}
.h1{font-family:Jost,Mont,sans-serif;font-weight:300;font-size:58px;line-height:1.02;letter-spacing:-.025em}
.h1.sm{font-size:48px}
.hsub{color:var(--mut);font-size:15px;margin-top:16px;font-weight:500}
.who{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:100px;
  padding:9px 9px 9px 22px;white-space:nowrap;box-shadow:var(--shadow-s)}
.wn{font-size:14px;font-weight:600;text-align:right}
.wr{font-size:12px;color:var(--mut);text-align:right;margin-top:3px}
.av{width:44px;height:44px;border-radius:50%;background:var(--ac);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex:0 0 auto}

/* ---------- герой: главное действие экрана ---------- */
.hero{background:var(--card);border-radius:30px;padding:30px 38px;display:grid;
  grid-template-columns:1fr 250px;gap:40px;align-items:center;box-shadow:var(--shadow)}
.hero.solo{grid-template-columns:1fr}
.lb{font-size:12px;color:var(--mut2);font-weight:600;margin-bottom:14px}
.date{font-family:Jost,Mont,sans-serif;font-weight:400;font-size:64px;line-height:.95;letter-spacing:-.03em}
.date.sm{font-size:52px}
.pills{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border-radius:100px;
  padding:9px 16px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.pill.ac{background:var(--ac-s);color:var(--ac)}
.pill.bad{background:var(--warm-s);color:var(--warm)}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--ac);color:#fff;border:0;
  border-radius:100px;padding:14px 26px;font-family:Mont,sans-serif;font-size:14px;font-weight:600;
  margin-top:24px;cursor:pointer;white-space:nowrap}
.ctan{font-size:12.5px;color:var(--mut);font-weight:500;margin-top:12px}

/* кольцо прогресса */
.ring{position:relative;width:210px;height:210px;justify-self:end}
.ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rn{font-family:Jost,Mont,sans-serif;font-size:56px;font-weight:400;letter-spacing:-.03em;line-height:1}
.rl{font-size:12px;color:var(--mut);font-weight:600;margin-top:8px;text-align:center;line-height:1.4}

/* ---------- сетки ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.two{display:grid;grid-template-columns:1fr 400px;gap:18px;margin-top:18px;align-items:stretch}
.two.wide{grid-template-columns:1fr 430px}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---------- карточка ---------- */
.c{background:var(--card);border-radius:24px;padding:22px 26px;box-shadow:var(--shadow-s)}
.c.p{padding:28px 32px}
.big{font-family:Jost,Mont,sans-serif;font-size:44px;font-weight:400;letter-spacing:-.025em;line-height:1}
.big small{font-family:Mont,sans-serif;font-size:17px;color:var(--mut2);letter-spacing:0;margin-left:7px;font-weight:500}
.big.bad{color:var(--warm)}
.big.n{font-size:36px;white-space:nowrap}   /* длинное число в узкой карточке */
.sub{font-size:13px;color:var(--mut);margin-top:12px;font-weight:500;line-height:1.45}
.sub b{font-weight:600;color:var(--ink)}
.sub b.bad{color:var(--warm)}
.wk{display:flex;gap:4px;margin-top:16px}
.wk i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.wk i.d{background:var(--ac)}

/* заголовок внутри карточки и заголовок секции */
.ch{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:22px}
.ct{font-family:Jost,Mont,sans-serif;font-size:26px;font-weight:500;letter-spacing:-.015em;line-height:1.15}
.ct.s{font-size:22px}
.lk{font-size:13px;color:var(--ac);font-weight:600;white-space:nowrap}
.lkm{font-size:13px;color:var(--mut);font-weight:500;white-space:nowrap}
.sh{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:28px 0 12px}

/* ---------- показатель со шкалой доли ---------- */
.m{padding:14px 0;border-top:1px solid var(--line)}
.m:first-of-type{border-top:0;padding-top:0}
.mtop{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.mn{font-size:14px;font-weight:500;color:var(--mut)}
.mv{font-family:Jost,Mont,sans-serif;font-size:26px;font-weight:400;letter-spacing:-.02em;white-space:nowrap}
.mv span{font-size:13px;color:var(--mut2);font-family:Mont,sans-serif;font-weight:500;margin-left:8px}
.bar{height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.bar.thin{height:6px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--ac)}

/* ---------- рейка А — факт — Б (сигнатурный элемент) ----------
   Ставится только там, где у показателя есть стартовое значение и цель.
   Точка — факт сегодня. Слева А, справа Б.                              */
.mr{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:12px}
.mre{font-size:12px;color:var(--mut);font-weight:500;white-space:nowrap}
.mre b{display:block;font-size:12px;color:var(--mut2);font-weight:600;margin-bottom:2px}
.mrt{position:relative;height:18px}
.mrt:before{content:'';position:absolute;left:0;right:0;top:6px;height:6px;background:var(--bg);border-radius:3px}
.mrf{position:absolute;left:0;top:6px;height:6px;background:var(--ac);border-radius:3px}
.mrd{position:absolute;top:0;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:var(--ac);border:4px solid var(--card);box-shadow:0 0 0 1px rgba(31,69,255,.25)}
.mrc{position:absolute;top:22px;transform:translateX(-50%);font-size:12px;font-weight:600;
  color:var(--ac);white-space:nowrap}
.mr.lab{margin-bottom:22px}

/* ---------- статусы ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:8px 14px;border-radius:100px;white-space:nowrap}
.chip s{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;flex:0 0 6px}
.chip.work{background:var(--ac-s);color:var(--ac)}
.chip.late{background:var(--warm-s);color:var(--warm)}
.chip.done{background:var(--ok-s);color:var(--ok)}
.chip.mut{background:var(--bg);color:var(--mut)}

/* ---------- кнопки второго плана ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  border:0;border-radius:100px;padding:11px 18px;font-family:Mont,sans-serif;font-size:13px;
  font-weight:600;cursor:pointer;background:var(--bg);color:var(--ink)}
.btn.w{background:#fff;color:var(--ink)}
.btn.o{background:rgba(255,255,255,.12);color:#fff}
.btn.ac{background:var(--ac);color:#fff}
.btns{display:flex;gap:9px}

/* ---------- тёмная карточка: одна на экран ---------- */
.tcd{background:var(--ink);color:#fff;border-radius:24px;padding:28px 30px;display:flex;flex-direction:column}
.tcd .ct{color:#fff}
.tcd .lb{color:#9AA3B4}
.tt{font-size:15px;font-weight:600;margin-top:4px}
.td{font-size:12.5px;color:#A7AFBE;margin-top:6px;font-weight:500}
.tx{font-size:14px;line-height:1.7;color:#D3D8E2;margin-top:18px}
.tcd .btns{margin-top:22px}
.note{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:#A7AFBE;line-height:1.55}

/* ---------- строка списка (задание, платёж, клиент, файл) ---------- */
.tk{display:grid;align-items:center;gap:18px;background:var(--card);border-radius:20px;
  padding:17px 26px;margin-bottom:9px;box-shadow:var(--shadow-s)}
.tk:last-child{margin-bottom:0}
.tk.q{box-shadow:none;background:#FAFBFC}
.tkt{font-size:15px;font-weight:600;line-height:1.3}
.tkm{font-size:12px;color:var(--mut2);margin-top:5px;font-weight:500}
.dt{font-size:13px;color:var(--mut);font-weight:500}
.dt b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
.ab{justify-self:end}
.fname{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut);font-weight:500}

/* ---------- карточка файла ---------- */
.f{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:20px;
  padding:18px 20px;box-shadow:var(--shadow-s)}
.fi{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--ac-s);color:var(--ac);
  display:flex;align-items:center;justify-content:center}
.fn2{font-size:13.5px;font-weight:600;line-height:1.35}
.fm{margin-top:5px;font-size:12px;color:var(--mut2);font-weight:500}

/* ---------- дорожка этапов ---------- */
.track{display:flex;flex-direction:column}
.st{display:grid;grid-template-columns:52px 1fr;align-items:stretch;margin-bottom:10px}
.st:last-child{margin-bottom:0}
.rail{position:relative;display:flex;justify-content:center}
.rail:before{content:'';position:absolute;top:0;bottom:-10px;left:25px;width:2px;background:var(--line)}
.rail.d:before{background:var(--ac)}
.st:last-child .rail:before{bottom:50%}
.node{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;background:var(--card);
  border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  margin-top:24px;color:var(--mut2)}
.node.done{background:var(--ac);border-color:var(--ac);color:#fff}
.node.now{border-color:var(--ac);color:var(--ac);background:var(--ac-s)}
.stg{display:grid;align-items:center;gap:18px;background:var(--card);border-radius:20px;
  padding:18px 26px;box-shadow:var(--shadow-s)}
.stg.lk{background:#FAFBFC;box-shadow:none}
.sn{font-size:12px;color:var(--mut2);font-weight:600}
.stt{margin-top:5px;font-size:17px;font-weight:600;line-height:1.25}
.stg.lk .stt{color:var(--mut)}
.sm{margin-top:5px;font-size:12px;color:var(--mut2);font-weight:500}
.pw{display:flex;align-items:center;gap:12px}
.pw span{font-size:13px;color:var(--mut);font-weight:600;width:42px;text-align:right}
.lkn{font-size:12px;color:var(--mut);font-weight:500;text-align:right;line-height:1.4}

/* ---------- условие закрытия этапа ---------- */
.cri{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.cri:first-of-type{border-top:0;padding-top:0}
.cb{width:22px;height:22px;flex:0 0 22px;border-radius:7px;background:var(--bg);color:transparent;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.cb.y{background:var(--ac);color:#fff}
.cn{font-size:13px;color:var(--mut);line-height:1.45;font-weight:500}
.cri.y .cn{color:var(--ink);font-weight:500}

/* ---------- строка содержимого этапа ---------- */
.li{display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center;
  padding:13px 0;border-top:1px solid var(--line)}
.li:first-of-type{border-top:0;padding-top:0}
.li.n{grid-template-columns:1fr auto}   /* строка «имя — значение», без иконки */
.lic{width:36px;height:36px;border-radius:11px;background:var(--bg);color:var(--mut);
  display:flex;align-items:center;justify-content:center}
.lin{font-size:13.5px;font-weight:600;line-height:1.3}
.lim{margin-top:4px;font-size:12px;color:var(--mut2);font-weight:500}
.lis{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap}

/* ---------- таблица клиентов (плотная, воздух полями) ---------- */
.tbl{background:var(--card);border-radius:24px;padding:8px 26px;box-shadow:var(--shadow-s)}
.thd,.trw{display:grid;grid-template-columns:320px 132px 88px 156px 88px 1fr;
  align-items:center;gap:16px}
.thd{padding:16px 0 12px;border-bottom:1px solid var(--line)}
.thd div{font-size:12px;color:var(--mut2);font-weight:600}
.trw{padding:11px 0;border-top:1px solid var(--line)}
.trw:first-of-type{border-top:0}
.cli{display:flex;align-items:center;gap:13px}
.cli .av{width:38px;height:38px;font-size:12.5px;background:var(--ac-s);color:var(--ac)}
.cn2{font-size:13.5px;font-weight:600;line-height:1.25}
.cm{font-size:12px;color:var(--mut2);margin-top:3px;font-weight:500}
.cd{font-size:13px;font-weight:600}
.cds{font-size:12px;color:var(--mut2);margin-top:3px;font-weight:500}
.pnum{font-size:13px;font-weight:600;width:34px;text-align:right;color:var(--mut)}
.right{text-align:right;justify-self:end}
.center{text-align:center;justify-self:center}

/* ---------- полоска-предупреждение ---------- */
.warn{display:flex;align-items:center;gap:12px}
.warn .ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.ico.bad{background:var(--warm-s);color:var(--warm)}
.ico.ac{background:var(--ac-s);color:var(--ac)}
.ico.dk{background:rgba(255,255,255,.12);color:#fff}

/* ==========================================================================
   Рабочая платформа: то, чего не было в макете — вход, формы, файлы,
   и мобильная раскладка. Визуальный язык не меняется: те же цвета,
   радиусы, шрифты и элементы, просто в одну колонку.
   ========================================================================== */

a{color:inherit;text-decoration:none}
.main{max-width:1254px}
button,input,select,textarea{font-family:Mont,sans-serif}
.cta:disabled,.btn:disabled{opacity:.5;cursor:default}
.nav a:hover{background:var(--bg)}
.nav a.on:hover{background:var(--ac)}
.tk a.tkt:hover,.lk:hover{text-decoration:underline}

/* ---------- вход ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 18px}
.lcard{background:var(--card);border-radius:30px;padding:40px 40px 34px;width:100%;max-width:440px;box-shadow:var(--shadow)}
.lcard .bt{font-size:28px}
.lcard .bs{margin-bottom:28px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12px;color:var(--mut2);font-weight:600;margin-bottom:7px}
.inp{width:100%;background:var(--bg);border:1px solid transparent;border-radius:14px;padding:13px 16px;
  font-size:14.5px;font-weight:500;color:var(--ink);outline:none}
.inp:focus{border-color:var(--ac);background:#fff}
.err{background:var(--warm-s);color:var(--warm);border-radius:14px;padding:12px 16px;font-size:13px;
  font-weight:600;margin-bottom:16px}
.okm{background:var(--ok-s);color:var(--ok);border-radius:14px;padding:12px 16px;font-size:13px;
  font-weight:600;margin-bottom:16px}
.cta.full{width:100%;justify-content:center;margin-top:10px}
.lnote{font-size:12.5px;color:var(--mut);margin-top:22px;line-height:1.55;font-weight:500}

/* ---------- формы внутри кабинета ---------- */
.upl{display:inline-flex}
.upl input[type=file]{display:none}
.frm-row{display:grid;grid-template-columns:1fr 200px;gap:16px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line)}
.frm-row:first-of-type{border-top:0}
.frm-row .inp{padding:11px 14px;text-align:right}
.hint{font-size:12.5px;color:var(--mut);font-weight:500;margin-top:14px;line-height:1.5}
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fchip{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border-radius:100px;
  padding:7px 14px;font-size:12px;font-weight:500;color:var(--mut)}
.fchip b{font-weight:600;color:var(--ink)}
.txt{font-size:14.5px;line-height:1.75;color:var(--ink)}
.txt p{margin-bottom:14px}
.txt p:last-child{margin-bottom:0}
.back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--mut);margin-bottom:18px}

/* ---------- верх и низ на телефоне ---------- */
.mbar,.mnav{display:none}   /* .mtop в макете занят строкой показателя */

@media(max-width:1100px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:16px 16px 92px}
  .mbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:var(--card);padding:12px 16px;position:sticky;top:0;z-index:20;
    box-shadow:0 1px 0 var(--line)}
  .mbar .bt{font-size:17px}
  .mbar .av{width:38px;height:38px;font-size:12.5px}
  .mnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;
    background:var(--card);border-top:1px solid var(--line);z-index:30;padding:6px 2px 8px}
  .mnav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;
    font-size:9.5px;font-weight:600;color:var(--mut2);text-align:center;line-height:1.15}
  .mnav a.on{color:var(--ac)}
  .head{flex-direction:column;gap:12px;margin-bottom:16px}
  .h1,.h1.sm{font-size:32px;letter-spacing:-.02em}
  .hsub{font-size:13.5px;margin-top:10px}
  .who{display:none}
  .hero,.hero.solo{grid-template-columns:minmax(0,1fr);padding:22px 20px;border-radius:24px;gap:22px}
  .date{font-size:40px}
  .date.sm{font-size:28px}
  .ring{justify-self:center;width:170px;height:170px}
  .ring svg{width:170px;height:170px}
  .rn{font-size:44px}
  .cta{padding:14px 22px;width:100%;justify-content:center}
  .row2,.row3,.row4,.two,.two.wide{grid-template-columns:1fr;gap:12px;margin-top:12px}
  .c,.c.p{padding:18px 18px;border-radius:20px}
  .big{font-size:34px}
  .big.n{font-size:26px}
  .ct{font-size:21px}
  .ct.s{font-size:19px}
  .sh{margin:20px 0 10px;flex-wrap:wrap;gap:8px}
  /* строки списков в макете разложены колонками через inline-style —
     на телефоне разбираем их в одну колонку */
  .tk,.stg,.li,.frm-row{grid-template-columns:1fr!important;gap:10px!important}
  .tk{padding:16px 18px;border-radius:18px}
  .li{align-items:start}
  .ab,.right{justify-self:start!important;text-align:left!important}
  .btn{padding:11px 16px}
  .btns{flex-wrap:wrap}
  /* рейка на телефоне: А слева, Б справа, полоса под ними */
  .mr{grid-template-columns:1fr auto;gap:6px 12px}
  .mr .mre{white-space:normal}
  .mr .mre b{display:inline;margin-right:5px}
  .mr .mre[style]{text-align:right!important}
  .mr.lab{margin-bottom:26px}
  .mrc{transform:translateX(-50%)}
  .mrt{order:3;grid-column:1/-1}
  .mv{font-size:22px}
  .tcd{padding:22px 20px;border-radius:20px}
  .tcd[style]{flex-direction:column!important;align-items:flex-start!important;gap:18px!important}
  .track .st{grid-template-columns:34px 1fr}
  .rail:before{left:16px}
  .node{width:26px;height:26px;margin-top:18px}
  .stg{padding:16px 18px}
  .graph{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* длинные названия заданий и файлов не должны распирать экран вбок */
  .pill,.chip,.btn,.cta,.lkm,.lk,.dt,.lis,.fn2,.tkt,.stt,.lkn{white-space:normal;overflow-wrap:anywhere}
  .pill{max-width:100%}
  .date,.date.sm,.h1{overflow-wrap:anywhere}
  .stg .pw span{width:auto}
  /* карточки с раскладкой колонками через inline-style: и тёмная тоже */
  .tcd[style]{grid-template-columns:1fr!important}
  .btns{flex-direction:column;align-items:stretch;width:100%}
  .btns .btn,.btns .cta{width:100%}
  .lcard{padding:28px 22px}
  .tbl{padding:8px 16px;overflow-x:auto}
}