/* ───────── Шрифты: Golos Text (текст) и Unbounded (заголовки и цифры), оба с кириллицей, лежат рядом ───────── */
@font-face{font-family:"Golos Text";font-weight:400 900;font-display:swap;
  src:url(/static/fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-weight:400 900;font-display:swap;
  src:url(/static/fonts/golos-text-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-weight:200 900;font-display:swap;
  src:url(/static/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-weight:200 900;font-display:swap;
  src:url(/static/fonts/unbounded-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ───────── Токены ───────── */
:root{
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --r-s:6px;--r-m:12px;--r-l:20px;
  --accent:#b6ec3d;--on-accent:#141714;     /* единственный акцент: лайм из фирменной звезды */
  --tab-h:64px;
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#eceee7;--surface:#f8f9f4;--raised:#ffffff;--line:#d5d9cc;--line-soft:#e3e6db;
  --ink:#141714;--ink-2:#454b44;--muted:#737a6f;
  --todo:#9aa294;--doing:#2a78d6;--done:#1baf7a;--bad:#eb6834;
  --doing-ink:#1f5fae;--done-ink:#0c7a52;--bad-ink:#b3441a;
  --ring:#141714;--scrim:rgba(20,23,20,.45);
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#111412;--surface:#1a1e1b;--raised:#232824;--line:#333b34;--line-soft:#282e29;
  --ink:#eef0ea;--ink-2:#aab1a5;--muted:#7b8377;
  --todo:#7b8377;--doing:#3987e5;--done:#199e70;--bad:#d95926;
  --doing-ink:#86b9f5;--done-ink:#4cc79a;--bad-ink:#f2916a;
  --ring:#eef0ea;--scrim:rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{font:400 15px/1.45 var(--f-body);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0;text-align:inherit}
a.btn{text-decoration:none}
button.row{text-align:left}
.dept[aria-current=true] .name::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--ink)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r-s)}
svg{display:block}
h1,h2,h3{font-weight:600;line-height:1.2}
.muted{color:var(--muted)} .ink2{color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───────── Каркас ───────── */
#app{max-width:680px;margin:0 auto;min-height:100dvh;padding-bottom:calc(var(--tab-h) + 24px + env(safe-area-inset-bottom))}
.screen{padding:0 16px}
.top{display:flex;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 16px 4px}
.top .ev{display:flex;align-items:center;gap:6px;min-width:0;padding:6px 8px 6px 0;font-weight:600;font-size:16px}
.top .ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .grow{flex:1}
.logo{width:22px;height:22px;flex:none;color:var(--ink)}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.iconbtn:hover{background:var(--line-soft)}
.demo-flag{margin:8px 16px 0;padding:8px 12px;border-radius:var(--r-m);background:var(--line-soft);color:var(--ink-2);font-size:13px}

.section{margin-top:28px}
.section>h2{font-size:15px;display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.section>h2 .count{font-weight:400;color:var(--muted);font-size:13px}
.section .sub{color:var(--muted);font-size:13px;margin:-2px 0 8px}

/* ───────── Нижняя навигация ───────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar nav{max-width:680px;margin:0 auto;display:flex;height:var(--tab-h)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11.5px;color:var(--muted);position:relative;font-weight:500}
.tabbar button[aria-current=page]{color:var(--ink);font-weight:600}
.tabbar button[aria-current=page]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;
  background:var(--accent);border-radius:0 0 3px 3px}
.tabbar .alarm[aria-current=page]::before{background:var(--bad)}
.tabbar .badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center}

/* ───────── Обзор: заголовок и «пульс» ───────── */
.verdict{padding-top:18px}
.verdict h1{font:600 24px/1.15 var(--f-display);letter-spacing:-.01em}
.verdict p{margin-top:8px;color:var(--ink-2)}
.verdict p b{color:var(--ink);font-weight:600}
.pulse{margin-top:22px}
.strip{position:relative;display:flex;align-items:flex-end;gap:3px;height:76px;padding-top:14px;
  border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.tick{flex:1 1 0;min-width:6px;max-width:26px;position:relative;border-radius:5px 5px 0 0;
  border:2px solid transparent;transition:transform .12s}
.tick:hover{transform:translateY(-2px)}
.tick.st-done{background:var(--done)}
.tick.st-doing{background:var(--doing)}
.tick.st-problem{background:var(--bad)}
.tick.st-todo{border-color:var(--todo);border-bottom:0}
.tick.late::after{content:"";position:absolute;top:-10px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--bad)}
.tick.st-problem::before{content:"";position:absolute;left:2px;right:2px;top:5px;height:3px;background:rgba(255,255,255,.8);border-radius:2px}
.today{flex:none;align-self:stretch;position:relative;width:2px;margin:0 3px;background:var(--ink)}
.today.first span{left:0;transform:none}
.today span{position:absolute;top:-1px;left:-2px;transform:none;padding:1px 7px;background:var(--accent);
  color:var(--on-accent);font-size:11px;font-weight:600;border-radius:8px;white-space:nowrap}
.eday{flex:none;align-self:stretch;position:relative;width:2px;margin-left:5px;background:var(--ink)}
.eday::after{content:"";position:absolute;top:0;left:2px;width:12px;height:9px;background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%)}
.pulse .axis{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:6px}
.legend{display:flex;flex-wrap:wrap;gap:6px 6px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border-radius:999px;
  border:1px solid var(--line);font-size:13.5px;background:transparent;font-weight:500}
.chip:hover{background:var(--line-soft)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip b{font-weight:700}
.hint{margin-top:10px;color:var(--muted);font-size:12.5px;max-width:52ch}

/* ───────── Статусы: форма + цвет, никогда только цвет ───────── */
.st{width:20px;height:20px;flex:none}
.st-todo .ring{stroke:var(--todo)}
.st circle.f-doing{fill:var(--doing)} .st circle.f-done{fill:var(--done)} .st circle.f-problem{fill:var(--bad)}
.st circle.o-doing{stroke:var(--doing)} .st circle.o-todo{stroke:var(--todo)}

/* ───────── Списки строк ───────── */
.rows{list-style:none;padding:0}
.row{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line-soft);width:100%}
.rows>li:first-child .row{border-top:0}
.row .main{flex:1;min-width:0;display:block;text-align:left}
.row .title{display:block;font-weight:550;overflow-wrap:anywhere}
.row.done .title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.row .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:5px;color:var(--ink-2);font-size:13px}
.row .side{flex:none;text-align:right;font-size:13px;color:var(--ink-2);padding-top:1px;max-width:45%;white-space:nowrap}
.statusbtn{width:34px;height:34px;margin:-7px -7px -7px -7px;display:grid;place-items:center;border-radius:50%}
.statusbtn:hover{background:var(--line-soft)}
.tag{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:var(--r-s);font-size:12px;color:var(--ink-2)}
.who{display:inline-flex;align-items:center;gap:4px}
.avatars{display:inline-flex}
.avatar{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;
  background:var(--line-soft);color:var(--ink-2);border:2px solid var(--bg);margin-left:-6px}
.avatars .avatar:first-child{margin-left:0}
.avatar.lg{width:38px;height:38px;font-size:13px;border:0;margin:0;flex:none}
.late-text{color:var(--bad-ink);font-weight:550;display:inline-flex;align-items:center;gap:4px}
.reason{color:var(--bad-ink);font-weight:500}
.lock{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.empty{padding:28px 0;color:var(--muted);text-align:left}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* ───────── Отделы ───────── */
.dept{display:block;width:100%;padding:12px 0;border-top:1px solid var(--line-soft)}
.rows>li:first-child .dept{border-top:0}
.dept .head{display:flex;align-items:baseline;gap:10px}
.dept .name{font-weight:600;flex:1}
.dept .frac{color:var(--ink-2);font-size:13px}
.health{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.health i{width:8px;height:8px;border-radius:50%;display:inline-block}
.health .green{background:var(--done)} .health .yellow{background:#e5a700} .health .red{background:var(--bad)} .health .gray{background:var(--todo)}
.bar{display:flex;gap:2px;height:10px;margin-top:9px}
.bar span{display:block;border-radius:0 4px 4px 0;min-width:4px}
.bar span:first-child{border-radius:4px 0 0 4px}
.bar span:only-child{border-radius:4px}
.bar .b-done{background:var(--done)} .bar .b-doing{background:var(--doing)} .bar .b-problem{background:var(--bad)}
.bar .b-todo{background:transparent;box-shadow:inset 0 0 0 2px var(--todo)}

/* ───────── Формы и кнопки ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:var(--r-m);font-weight:600;border:1px solid var(--line);background:transparent}
.btn:hover{background:var(--line-soft)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn.primary:hover{filter:brightness(.96)}
.btn.danger{color:var(--bad-ink);border-color:var(--bad)}
.btn.alarm{background:var(--bad);color:#fff;border-color:transparent}
.btn.block{display:flex;width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.small{min-height:36px;padding:0 12px;font-size:14px}
.field{display:block;margin-top:14px}
.field>span{display:block;font-size:13px;color:var(--ink-2);margin-bottom:5px}
.input,.select,.textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--raised)}
.textarea{min-height:84px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--ring);outline-offset:0;border-color:transparent}
.seg{display:flex;padding:3px;border-radius:var(--r-m);background:var(--line-soft);gap:2px}
.seg button{flex:1;min-height:36px;border-radius:9px;text-align:center;font-size:13.5px;font-weight:550;color:var(--ink-2);padding:0 6px}
.seg button[aria-pressed=true]{background:var(--raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.toolbar .select{width:auto;min-height:36px;padding:4px 10px;font-size:13.5px}
.check{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-soft);cursor:pointer}
.check:first-child{border-top:0}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink);flex:none}
.check .t{flex:1;min-width:0}
.check .t small{display:block;color:var(--muted);font-size:12.5px}
.check.off{opacity:.5;cursor:default}
.fab{position:fixed;right:max(16px,calc(50% - 340px + 16px));bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));z-index:15;
  height:52px;padding:0 20px 0 16px;border-radius:26px;background:var(--accent);color:var(--on-accent);font-weight:650;
  display:flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* ───────── Цифры и графики ───────── */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);margin-top:18px}
.kpi{padding:14px 0;border-top:1px solid var(--line-soft)}
.kpi:nth-child(-n+2){border-top:0}
.kpi:nth-child(even){padding-left:16px;border-left:1px solid var(--line-soft)}
.kpi b{display:block;font:500 26px/1.1 var(--f-display)}
.kpi span{display:block;color:var(--ink-2);font-size:13px;margin-top:4px}
.chart{position:relative;margin-top:6px}
.chart svg{width:100%;overflow:visible;touch-action:pan-y}
.chart text{font:12px var(--f-body);fill:var(--muted)}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .base{stroke:var(--line);stroke-width:1}
.chart .line-a{fill:none;stroke:var(--doing);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .line-p{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;opacity:.75}
.chart .area{fill:var(--doing);opacity:.1}
.chart .dot{fill:var(--doing);stroke:var(--surface);stroke-width:2}
.chart .xh{stroke:var(--ink);stroke-width:1;opacity:.5}
.keys{display:flex;gap:16px;margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.keys i{display:inline-block;width:16px;height:2px;margin-right:7px;vertical-align:middle;border-radius:2px}
.hbar{display:grid;grid-template-columns:minmax(80px,32%) 1fr;gap:10px;align-items:center;padding:6px 0;width:100%}
.hbar .n{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .t{display:flex;align-items:center;gap:8px}
.hbar .fill{display:flex;gap:2px;height:14px}
.hbar .fill span{display:block;min-width:4px;border-radius:0 5px 5px 0}
.hbar .fill span:first-child{border-radius:5px 0 0 5px} .hbar .fill span:only-child{border-radius:5px}
.hbar .fill .open{background:var(--doing)} .hbar .fill .late{background:var(--bad)}
.hbar .v{font-size:13px;color:var(--ink-2);flex:none}
.meter{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden;flex:1}
.meter i{display:block;height:100%;background:var(--done);border-radius:4px}
.tip{position:fixed;z-index:60;pointer-events:none;padding:8px 10px;border-radius:var(--r-m);background:var(--ink);color:var(--bg);
  font-size:12.5px;max-width:220px;opacity:0;transition:opacity .08s}
.tip.on{opacity:1}
.tip b{display:block;font-size:15px;font-weight:650;margin-bottom:1px}
details.table{margin-top:10px;font-size:13px;color:var(--ink-2)}
details.table summary{cursor:pointer;padding:6px 0}
details.table table{width:100%;border-collapse:collapse;margin-top:6px}
details.table td,details.table th{text-align:left;padding:5px 8px 5px 0;border-top:1px solid var(--line-soft);font-weight:400}
details.table th{color:var(--muted)}

.feed{list-style:none;padding:0}
.feed li{padding:10px 0;border-top:1px solid var(--line-soft);font-size:13.5px}
.feed li:first-child{border-top:0}
.feed time{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* ───────── Шторки, всплывашки ───────── */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim);animation:fade .18s ease-out}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:680px;margin:0 auto;max-height:92dvh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-l) var(--r-l) 0 0;animation:rise .22s cubic-bezier(.2,.8,.2,1);
  padding-bottom:env(safe-area-inset-bottom)}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0;flex:none}
.sheet header{display:flex;align-items:center;gap:8px;padding:10px 12px 6px 20px;flex:none}
.sheet header h2{flex:1;font-size:18px;min-width:0;overflow-wrap:anywhere}
.sheet .body{overflow-y:auto;padding:0 20px 22px;overscroll-behavior:contain}
.sheet .actions{display:flex;gap:10px;margin-top:20px}
.sheet .actions .btn{flex:1}
.stack-gap>*+*{margin-top:10px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  max-width:min(92vw,420px);padding:11px 16px;border-radius:var(--r-m);background:var(--ink);color:var(--bg);font-size:14px;
  animation:rise .2s ease-out}
.toast.bad{background:var(--bad);color:#fff}
.loading #content{opacity:.55;transition:opacity .15s}
.note{padding:12px 14px;border-radius:var(--r-m);background:var(--line-soft);color:var(--ink-2);font-size:13.5px}
.note.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--ink)}
.summary{list-style:none;padding:0}
.summary li{padding:9px 0;border-top:1px solid var(--line-soft)}
.summary li:first-child{border-top:0}
.summary b{font-weight:650}

@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition:none!important}}
@media (min-width:700px){.verdict h1{font-size:30px}.sheet{border-radius:var(--r-l);bottom:24px;max-height:86dvh}}