/* Консоль Estee OS — режим оператора.

   Подача переработана 29.08.2026. Прежняя версия была «военный терминал»:
   оливковый фон, сетка на подложке, свечение почти у каждого элемента.
   Проблема была не в красоте, а в иерархии — когда светится всё, авария
   не выделяется ничем. Теперь свечение осталось ТОЛЬКО у сломанного, фон
   нейтрально-графитовый, а внимание держат размер и цвет числа.

   Второе: консоль смотрят с телефона. Раскладка ниже — mobile-friendly:
   рельса уезжает в выдвижную панель, снизу появляется таб-бар, плотные
   сетки схлопываются в одну-две колонки. */

:root{
  /* Витрина: почти чёрная подложка, плитка светлее фона и с градиентом —
     объём даёт кромка, а не тень. Цвет по-прежнему означает только состояние. */
  --bg:#08090C; --bg-2:#0B0D11; --panel:#101218; --panel-2:#0C0E13;
  --line:#1C1F27; --line-2:#282C36;
  --text:#ECEEF2; --muted:#9EA5B3; --dim:#666D7C;

  --ok:#4ADE80; --warn:#F5B544; --bad:#FF6B6B; --accent:#4ADE80;
  --violet:#A78BFA;
  --ok-bg:rgba(74,222,128,.10);  --ok-br:rgba(74,222,128,.30);
  --warn-bg:rgba(245,181,68,.10); --warn-br:rgba(245,181,68,.30);
  --bad-bg:rgba(255,107,107,.10); --bad-br:rgba(255,107,107,.32);

  --r:22px; --r-s:14px;
  --sh:0 1px 2px rgba(0,0,0,.45);
  --sh-lift:0 10px 34px rgba(0,0,0,.5);
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --sans:-apple-system,'SF Pro Text','Inter','Helvetica Neue',Arial,sans-serif;

  --rail-w:224px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  /* Два мягких пятна по верхним углам: дают глубину, но не конкурируют
     с данными за внимание. Сетки на подложке нет намеренно. */
  background-image:
    radial-gradient(60% 40% at 12% -6%,rgba(74,222,128,.10),transparent 62%),
    radial-gradient(50% 40% at 92% -2%,rgba(167,139,250,.08),transparent 62%);
}
a{cursor:pointer;text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#282C34;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* Микроподпись — общий приём всей консоли: моно, капс, разрядка. */
.lbl,.nav-group,.crumb,.sect,.kind,.pf .k,.tab{
  font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
}

/* ── каркас ────────────────────────────────────────────────────────────── */
.shell{display:flex;height:100%;overflow:hidden}

.rail{
  width:var(--rail-w);flex:none;background:var(--bg-2);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:16px 12px;overflow-y:auto;
}
.brand{display:flex;gap:11px;align-items:center;padding:2px 6px 18px}
.mark{
  width:34px;height:34px;flex:none;border-radius:11px;
  background:linear-gradient(160deg,#1E3A2C,#141A17);
  color:var(--accent);display:grid;place-items:center;font-size:16px;
  box-shadow:0 0 0 1px rgba(63,207,142,.22) inset;
}
.mark.big{width:52px;height:52px;font-size:24px;margin:0 auto 16px}
.brand-name{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;font-weight:600}
.brand-sub{font-size:11px;color:var(--dim);letter-spacing:.04em}

.nav-group{
  font-size:9.5px;color:var(--dim);margin:16px 10px 6px;
  display:flex;align-items:center;gap:8px;
}
.nav-group::after{content:'';flex:1;height:1px;background:var(--line)}
.nav{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);
  color:var(--muted);font-size:13.5px;position:relative;
  transition:background .13s,color .13s;
}
.nav:hover{background:var(--panel-2);color:var(--text)}
.nav.on{background:var(--panel-2);color:var(--text);font-weight:550}
.nav.on::before{
  content:'';position:absolute;left:-12px;top:9px;bottom:9px;width:2px;
  border-radius:0 2px 2px 0;background:var(--accent);
}
.nav .ico{width:16px;text-align:center;color:var(--dim);font-size:12px}
.nav.on .ico{color:var(--accent)}
.badge{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);border-radius:20px;
  padding:1px 7px;min-width:22px;text-align:center;
}
.rail-foot{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding:13px 8px 2px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--dim);
}
.linkish{background:none;border:0;color:var(--dim);font-size:11px;padding:0;font-family:var(--mono)}
.linkish:hover{color:var(--bad)}

main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 24px 14px;border-bottom:1px solid var(--line);
  background:var(--bg);
}
.top h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.top .crumb{font-size:9.5px;color:var(--dim);margin-bottom:4px}
.top-right{display:flex;align-items:center;gap:9px;flex:none}

/* Кнопка-бургер: живёт только на узком экране. */
.burger{
  display:none;background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:var(--r-s);width:38px;height:38px;flex:none;font-size:15px;
}
.burger:active{background:var(--panel-2)}

.pill{
  font-family:var(--mono);font-size:11px;padding:5px 12px;border-radius:20px;
  border:1px solid var(--line);color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{color:#7FE3B4;border-color:var(--ok-br);background:var(--ok-bg)}
.pill.warn{color:#F0D28C;border-color:var(--warn-br);background:var(--warn-bg)}
/* Пульсирует только авария — единственное место, где движение оправдано. */
.pill.bad{color:#F7ADA6;border-color:var(--bad-br);background:var(--bad-bg)}
.pill.bad::before{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.3}}

.ghost{
  background:var(--panel);border:1px solid var(--line);color:var(--muted);
  border-radius:var(--r-s);padding:6px 13px;font-size:12px;font-family:var(--mono);
}
.ghost:hover{color:var(--text);border-color:var(--line-2)}

.view{flex:1;overflow-y:auto;padding:20px 24px 32px;animation:rise .2s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.statusbar{
  border-top:1px solid var(--line);padding:9px 24px;font-family:var(--mono);
  font-size:11px;color:var(--dim);background:var(--bg-2);
}

/* ── карточки и плитки ─────────────────────────────────────────────────── */
.grid{display:grid;gap:12px}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:19px 21px;position:relative;overflow:hidden;box-shadow:var(--sh);
}
/* Тонкий блик по верхней кромке — объём без тяжёлых теней. */
.card::before,.agent::before,.pass::before,.mat::before{
  content:'';position:absolute;left:21px;right:21px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
}
.tile .lbl{font-size:9.5px;color:var(--dim)}
.tile .val{
  font-size:36px;font-weight:660;line-height:1.15;margin-top:8px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.tile .val small{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0}
.tile .sub{font-size:12px;color:var(--muted);margin-top:5px}
/* Цветом красим только исключения: норма — обычный белый. */
.val.ok{color:var(--ok)}
.val.bad{color:var(--bad);text-shadow:0 0 26px rgba(240,115,106,.3)}
.val.warn{color:var(--warn)}
.val.dim{color:var(--dim)}

.sect{
  margin:24px 0 10px;font-size:9.5px;color:var(--dim);
  display:flex;align-items:center;gap:10px;
}
.sect::after{content:'';flex:1;height:1px;background:var(--line)}

/* Плашка-вывод. Слева цветная полоса вместо заливки всей карточки —
   так текст остаётся читаемым, а статус виден с расстояния. */
.note{
  border-radius:var(--r);padding:13px 16px;margin-bottom:10px;
  font-size:13.5px;line-height:1.55;border:1px solid var(--line);
  background:var(--panel);border-left-width:3px;
}
.note.ok{border-left-color:var(--ok);background:linear-gradient(90deg,var(--ok-bg),transparent 55%),var(--panel);color:#CDEDDD}
.note.warn{border-left-color:var(--warn);background:linear-gradient(90deg,var(--warn-bg),transparent 55%),var(--panel);color:#EEDCB0}
.note.bad{border-left-color:var(--bad);background:linear-gradient(90deg,var(--bad-bg),transparent 55%),var(--panel);color:#F5C8C3}
.note b{font-weight:650}
.note .row{margin-top:5px}
.mono{font-family:var(--mono)} .muted{color:var(--muted)} .dim{color:var(--dim)}

/* ── карта ─────────────────────────────────────────────────────────────── */
.map-wrap{display:flex;gap:12px;align-items:stretch}
.map-canvas svg{display:block}
.map-canvas{
  flex:1;min-width:0;background:radial-gradient(80% 70% at 50% 45%,#101216,var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;
}
.map-side{
  width:272px;flex:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 16px;overflow-y:auto;
}
.map-side h4{margin:0 0 3px;font-size:15px}
.map-side .kind{font-size:9.5px;color:var(--dim);margin-bottom:10px}
.map-side .line{color:var(--muted);font-size:12.5px;margin-bottom:5px;word-break:break-word}
.map-side .hint{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
                color:var(--dim);font-size:11.5px;line-height:1.5}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;
        color:var(--muted);font-family:var(--mono)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.mapctl{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px;
        font-size:12.5px;color:var(--muted)}
.mapctl label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}

/* ── списки ────────────────────────────────────────────────────────────── */
.row-item{
  display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-radius:var(--r-s);
  background:var(--panel);border:1px solid var(--line);margin-bottom:7px;
  transition:border-color .12s,background .12s;
}
.row-item:hover{border-color:var(--line-2);background:var(--panel-2)}
.row-item .id{font-family:var(--mono);font-size:11.5px;color:var(--dim);min-width:40px;padding-top:1px}
.row-item .t{flex:1;min-width:0}
.row-item .t .title{font-size:13.5px}
.row-item .t .meta{font-size:11.5px;color:var(--dim);margin-top:3px;font-family:var(--mono)}
.row-item .act{display:flex;gap:7px;flex:none}
.mini{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
      border-radius:8px;padding:4px 11px;font-size:11.5px;font-family:var(--mono)}
.mini:hover{color:var(--text);border-color:var(--line-2)}
.mini.go:hover{color:var(--ok);border-color:var(--ok-br);background:var(--ok-bg)}

.tabs{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.tab{font-size:10.5px;padding:6px 13px;border-radius:20px;
     border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.tab:hover{color:var(--text);border-color:var(--line-2)}
.tab.on{color:#0C1410;background:var(--accent);border-color:var(--accent);font-weight:600}

/* Карточка агента: цвет владельца — тонкой полосой слева, как в списках,
   а не сверху: так карточки в сетке читаются одним столбцом взгляда. */
.agent{background:linear-gradient(180deg,var(--panel),var(--panel-2));
       border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
       padding:18px 20px;border-left:3px solid var(--line);position:relative;box-shadow:var(--sh)}
.agent .nm{font-size:15px;font-weight:600}
.agent .rl{font-size:12px;color:var(--dim);margin-bottom:8px}
.agent .st{font-size:12.5px;margin-bottom:6px;display:flex;align-items:center}
.agent .nt{font-size:11.5px;color:var(--dim);line-height:1.5}

.step{display:flex;align-items:center;gap:10px;padding:8px 13px;border-radius:var(--r-s);
      background:var(--panel);border:1px solid var(--line);margin-bottom:5px;font-size:12.5px}
.step .nm{flex:1;min-width:0;font-family:var(--mono);font-size:12px;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step .dur{color:var(--dim);font-family:var(--mono);font-size:11.5px;
           font-variant-numeric:tabular-nums;flex:none}

/* ── паспорта ──────────────────────────────────────────────────────────── */
.pass{background:linear-gradient(180deg,var(--panel),var(--panel-2));
      border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden;
      padding:19px 21px;margin-bottom:11px;border-left:3px solid var(--line);box-shadow:var(--sh)}
.pass .ph{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:12px}
.pass .ph .nm{font-size:16px;font-weight:600}
.pass .ph .fill{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim)}
.pf{display:grid;grid-template-columns:176px 1fr;gap:7px 16px;font-size:13px}
.pf .k{font-size:9.5px;color:var(--dim);padding-top:3px}
.pf .v{color:var(--muted);line-height:1.55}
.pf .v.gap{color:#8A5F59;font-style:italic}

/* ── зрелость ──────────────────────────────────────────────────────────── */
.mat{background:linear-gradient(180deg,var(--panel),var(--panel-2));
     border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden;
     padding:18px 20px;margin-bottom:9px;box-shadow:var(--sh)}
.mat .mh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:11px}
.mat .mh .nm{font-size:14.5px;font-weight:600;min-width:120px}
.mat .mh .lv{font-family:var(--mono);font-size:11px;color:var(--muted)}
.ladder{display:flex;gap:4px;flex:1;max-width:240px;min-width:120px}
.rung{flex:1;height:8px;border-radius:3px;background:var(--bg-2);border:1px solid var(--line)}
.rung.on{background:var(--ok);border-color:var(--ok)}
.checks{display:grid;gap:5px;font-size:12px}
.chk{display:flex;gap:9px;align-items:baseline}
.chk .m{font-family:var(--mono);width:14px;flex:none}
.chk.ok .m{color:var(--ok)} .chk.no .m{color:var(--bad)}
.chk .n{min-width:196px;color:var(--muted)}
.chk .w{color:var(--dim);font-size:11.5px}

/* ── формы ─────────────────────────────────────────────────────────────── */
input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}
form.inline{display:flex;gap:9px;margin:10px 0 6px;flex-wrap:wrap}
input[type=text],input[type=password],textarea,select{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);color:var(--text);
  padding:10px 12px;font:inherit;font-size:13px;outline:none;transition:border-color .12s;
  max-width:100%;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--ok-br);box-shadow:0 0 0 3px rgba(63,207,142,.08)}
textarea{width:100%;min-height:84px;resize:vertical;font-family:var(--sans)}
button.primary{background:var(--accent);border:1px solid var(--accent);
               color:#0B1410;border-radius:var(--r-s);padding:10px 18px;
               font-size:13px;font-weight:600}
button.primary:hover{filter:brightness(1.08)}
.ok-msg{color:var(--ok);font-size:12.5px} .err-msg{color:var(--bad);font-size:12.5px}

/* ── вход ──────────────────────────────────────────────────────────────── */
.login-body{display:grid;place-items:center;height:100vh;padding:20px}
.login{background:var(--panel);border:1px solid var(--line);border-radius:18px;
       padding:34px 30px;width:min(340px,100%);text-align:center;box-shadow:var(--sh-lift)}
.login input{width:100%;margin:18px 0 10px;text-align:center;font-family:var(--mono)}
.login button{width:100%;background:var(--accent);border:1px solid var(--accent);
              color:#0B1410;border-radius:var(--r-s);padding:11px;font-size:13.5px;font-weight:600}
.err{color:var(--bad);font-size:12.5px;margin-top:10px;min-height:18px}

/* Аварийный узел на карте шевелится: красная точка среди зелёных иначе
   теряется при беглом взгляде. */
@keyframes halo{0%,100%{opacity:1}50%{opacity:.42}}
svg circle.pulse{animation:halo 1.6s ease-in-out infinite}

/* ── нижний таб-бар: только на узком экране ────────────────────────────── */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(14,16,19,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:7px 4px calc(7px + var(--safe-b));
}
.tabbar .nav{
  flex:1;flex-direction:column;gap:4px;padding:5px 2px;border-radius:var(--r-s);
  font-size:10px;color:var(--dim);text-align:center;
}
.tabbar .nav .ico{font-size:16px;width:auto}
.tabbar .nav.on{background:none;color:var(--accent);font-weight:600}
.tabbar .nav.on::before{display:none}
.tabbar .nav.on .ico{color:var(--accent)}
.tabbar .badge{
  margin:0;position:absolute;top:1px;left:50%;transform:translateX(4px);
  font-size:9px;padding:0 5px;background:var(--accent);color:#0B1410;border:0;font-weight:600;
}
.tabbar .badge:empty{display:none}
.scrim{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45;
  backdrop-filter:blur(2px);
}
.scrim.on{display:block}


/* ── бенто пульса ──────────────────────────────────────────────────────── */
/* Плитки разного веса вместо ровной сетки: главный вопрос («всё ли цело»)
   занимает больше места, чем второстепенные числа. Порядок чтения задан
   размером, а не позицией в потоке. */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.span3{grid-column:span 3} .span4{grid-column:span 4} .span5{grid-column:span 5}
.span6{grid-column:span 6} .span7{grid-column:span 7} .span12{grid-column:span 12}

/* Герой: одно предложение, отвечающее на вопрос владельца. */
.hero{display:flex;flex-direction:column;min-height:214px}
.hero .big{font-size:42px;font-weight:680;letter-spacing:-.03em;line-height:1.06;
           margin:13px 0 7px}
.hero .big .accent{color:var(--bad)}
.hero .big .calm{color:var(--ok)}
.hero .lead{color:var(--muted);font-size:14px;max-width:46ch;line-height:1.5}
.probs{margin-top:auto;padding-top:16px;display:grid;gap:8px}
.prob{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-s);
      background:var(--bad-bg);border:1px solid var(--bad-br)}
.prob.warn{background:var(--warn-bg);border-color:var(--warn-br)}
.prob .nm{font-size:13.5px;font-weight:560}
.prob .why{font-size:12px;color:var(--muted);margin-left:auto;font-family:var(--mono);
           text-align:right}
/* Пульсирует только авария — единственное движение на экране. */
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--bad);flex:none;
           box-shadow:0 0 12px var(--bad);animation:beat 1.6s ease-in-out infinite}
.prob.warn .pulse-dot{background:var(--warn);box-shadow:0 0 12px var(--warn);animation:none}

/* Кольцо «сколько узлов живо»: доля видна раньше, чем прочитано число. */
.ring-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
           height:100%;padding-top:6px}
.ring{position:relative;width:172px;height:172px}
.ring svg{transform:rotate(-90deg)}
.ring .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .num{font-size:40px;font-weight:680;letter-spacing:-.03em;line-height:1;
           font-variant-numeric:tabular-nums}
.ring .of{font-size:11.5px;color:var(--dim);font-family:var(--mono);margin-top:5px}
.ringlegend{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;margin-top:16px;
            font-size:11.5px;color:var(--muted);font-family:var(--mono)}
.ringlegend span{display:inline-flex;align-items:center;gap:6px}

/* Метрика со спарклайном. */
.kpi .v{font-size:34px;font-weight:660;letter-spacing:-.02em;margin-top:10px;
        font-variant-numeric:tabular-nums;line-height:1}
.kpi .v small{font-size:15px;color:var(--dim);font-weight:400;letter-spacing:0}
.kpi .s{font-size:12px;color:var(--muted);margin-top:6px}
.spark{margin-top:12px;display:block;width:100%;height:34px}
.delta{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:8px;
       display:inline-block;margin-top:9px}
.delta.up{color:#8BEFB4;background:var(--ok-bg)}
.delta.flat{color:var(--muted);background:rgba(255,255,255,.05)}

/* Ночная цепочка: 12 сегментов, сбойный видно не читая. */
.chain{display:flex;gap:5px;margin-top:16px;flex-wrap:wrap}
.seg{flex:1 1 14px;height:38px;border-radius:8px;
     background:var(--ok-bg);border:1px solid var(--ok-br)}
.seg.bad{background:rgba(255,107,107,.24);border-color:rgba(255,107,107,.45);
         box-shadow:0 0 18px rgba(255,107,107,.25)}
.chainfoot{display:flex;justify-content:space-between;gap:10px;margin-top:11px;
           font-family:var(--mono);font-size:11px;color:var(--dim);flex-wrap:wrap}

/* Агенты компактной строкой — на пульсе важен факт «на связи», не карточка. */
.agents{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.ag{display:flex;align-items:center;gap:9px;padding:9px 13px 9px 9px;border-radius:var(--r-s);
    background:var(--panel-2);border:1px solid var(--line)}
.ag .em{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
        background:rgba(255,255,255,.04);font-size:15px;flex:none}
.ag .n{font-size:13px;font-weight:550}
.ag .r{font-size:11px;color:var(--dim)}
.ag .st{width:7px;height:7px;border-radius:50%;margin-left:4px;flex:none}

/* Строка задачи внутри бенто (не путать с .row-item на экране «Задачи»). */
.brows{margin-top:12px;display:grid;gap:7px}
.brow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-s);
      background:var(--panel-2);border:1px solid var(--line)}
.brow .id{font-family:var(--mono);font-size:11.5px;color:var(--dim);flex:none}
.brow .ttl{font-size:13.5px;flex:1;min-width:0;overflow:hidden;
           text-overflow:ellipsis;white-space:nowrap}
.btag{font-family:var(--mono);font-size:10px;padding:3px 9px;border-radius:8px;
      background:rgba(255,255,255,.05);color:var(--muted);flex:none}
.btag.hot{background:var(--warn-bg);color:#F7D08A}

/* ── адаптив ───────────────────────────────────────────────────────────── */
@media (max-width:1250px){.g5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .map-side{width:230px}
  .span7,.span5,.span4,.span6{grid-column:span 12}
  .span3{grid-column:span 6}
}

/* Планшет и телефон: рельса становится выдвижной панелью. */
@media (max-width:900px){
  .rail{
    position:fixed;left:0;top:0;bottom:0;z-index:50;width:270px;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:var(--sh-lift);padding-bottom:24px;
  }
  .rail.open{transform:none}
  .burger{display:grid;place-items:center}
  .top{padding:12px 14px;gap:10px}
  .top h1{font-size:17px}
  .top-right .ghost{display:none}      /* обновление — свайпом/бургером, кнопка лишняя */
  .view{padding:14px 14px 96px}         /* запас снизу под таб-бар */
  .statusbar{display:none}              /* длинная строка на телефоне не читается */
  .tabbar{display:flex}
  .map-wrap{flex-direction:column}
  .map-side{width:auto;max-height:250px}
  .map-canvas{flex:none;height:min(58vh,400px);min-height:0}
  .pf{grid-template-columns:1fr;gap:2px 0}
  .pf .k{padding-top:9px}
  .chk{flex-wrap:wrap}
  .chk .n{min-width:0;flex:1}
  .chk .w{width:100%;padding-left:23px}
}

/* Телефон: две колонки плиток — как в мобильных дашбордах, где числа
   сравнивают парами, а не листают по одному. */
@media (max-width:620px){
  body{font-size:13.5px}
  .span3{grid-column:span 6}
  .bento{gap:9px}
  .hero{min-height:0}
  .hero .big{font-size:32px}
  .kpi .v{font-size:27px}
  .ring{width:150px;height:150px}
  .prob{flex-wrap:wrap}
  .prob .why{margin-left:0;width:100%;text-align:left}
  .brow{flex-wrap:wrap;row-gap:8px}
  .brow .ttl{white-space:normal;overflow:visible;flex:1 1 100%;order:2}
  .brow .btag{order:3}
  .seg{height:30px}
  .g5,.g4,.g3,.g2{grid-template-columns:repeat(2,1fr)}
  .grid{gap:9px}
  .card{padding:16px 17px;border-radius:18px}
  .tile .val{font-size:27px;margin-top:6px}
  .tile .sub{font-size:11px}
  .row-item{flex-wrap:wrap;padding:12px 13px}
  .row-item .act{width:100%;padding-left:52px}
  .mini{flex:1;padding:7px 11px}      /* палец, а не курсор: цель крупнее */
  form.inline{gap:7px}
  form.inline input[type=text]{min-width:100%!important}
  form.inline select{flex:1}
  form.inline button.primary{flex:1}
  .agent{grid-column:1/-1}
  .mat .mh .nm{min-width:0;flex:1}
  .ladder{order:3;max-width:none;width:100%;flex-basis:100%}
  .pass{padding:14px 15px}
  .note{padding:12px 14px;font-size:13px}
}

/* ── Скиллы ──────────────────────────────────────────────────────────────── */
/* Метка прямо в заголовке строки: «устарел», «копия разошлась», «нет SKILL.md».
   Это признаки мусора, ради которых раздел и сделан, — прятать их в подпись
   значит снова получить каталог, который никто не чистит. */
.tagx{
  font-size:10px;letter-spacing:.04em;text-transform:lowercase;
  padding:2px 7px;border-radius:20px;margin-left:7px;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--dim);vertical-align:middle;
}
.tagx.bad{color:#F7ADA6;border-color:var(--bad-br);background:var(--bad-bg)}
.tagx.warn{color:#F0D28C;border-color:var(--warn-br);background:var(--warn-bg)}
.sdesc{
  font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.skill-agents{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:9px}
.sa .nm{font-size:12.5px}
.sa .dim{font-size:11px;margin-top:2px}
.sa-bar{height:5px;border-radius:4px;background:var(--panel-2);
        border:1px solid var(--line);margin-top:7px;overflow:hidden}
.sa-fill{height:100%;background:var(--accent);border-radius:4px;min-width:2px}
@media (max-width:720px){ .skill-agents{grid-template-columns:1fr} }

/* ── Аптайм ──────────────────────────────────────────────────────────────── */
/* Серый цвет пропуска намеренно НЕ бледнее фона: «не запускался» должно быть
   видно так же отчётливо, как сбой, иначе тихая смерть шага снова потеряется. */
.ubar{display:flex;gap:2px;margin-top:8px}
.ucell{flex:1 1 0;height:22px;border-radius:2px;min-width:3px;
       background:var(--panel-2);border:1px solid transparent}
.ubar.big .ucell{height:34px;border-radius:3px}
.ucell.ok{background:rgba(79,208,123,.55);border-color:rgba(79,208,123,.7)}
.ucell.fail{background:rgba(232,107,96,.75);border-color:rgba(232,107,96,.9)}
.ucell.none{background:repeating-linear-gradient(45deg,
            rgba(140,138,128,.35) 0 3px,transparent 3px 6px);
            border-color:rgba(140,138,128,.45)}
.ucell.pre{background:transparent;border-color:transparent}
.uends{display:flex;justify-content:space-between;margin-top:5px;font-size:10.5px}
.ustep{
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  margin-bottom:8px;background:var(--panel);
}
.ustep.silent{border-color:var(--bad-br);background:linear-gradient(90deg,var(--bad-bg),transparent 60%),var(--panel)}
.uhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.unm{font-size:12.5px;display:flex;align-items:center;flex-wrap:wrap}
.uhead .dim{font-size:11px;white-space:nowrap}
.uerr{margin-top:7px;font-size:11px;color:#F5C8C3;font-family:var(--mono);
      background:var(--bad-bg);border-left:2px solid var(--bad-br);
      padding:6px 9px;border-radius:0 6px 6px 0;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:720px){ .uhead .dim{white-space:normal} .ucell{height:18px} }

/* ── Инциденты ───────────────────────────────────────────────────────────── */
/* Вертикальная нить слева: события читаются как хроника, а не как таблица.
   Открытый инцидент пульсирует — он единственный требует действия сейчас. */
.inc{display:flex;gap:12px;position:relative;padding:0 0 14px 0}
.inc::before{content:'';position:absolute;left:5px;top:14px;bottom:0;width:1px;
             background:var(--line-2)}
.inc:last-child::before{display:none}
.inc-dot{flex:none;width:11px;height:11px;border-radius:50%;margin-top:4px;
         background:var(--panel-2);border:2px solid var(--line-2);z-index:1}
.inc.open .inc-dot{background:var(--bad);border-color:var(--bad);animation:beat 1.6s ease-in-out infinite}
.inc-body{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
          padding:10px 13px;background:var(--panel)}
.inc.open .inc-body{border-color:var(--bad-br);
                    background:linear-gradient(90deg,var(--bad-bg),transparent 60%),var(--panel)}
.inc-head{display:flex;align-items:center;flex-wrap:wrap;font-size:12.5px}
.inc-body .meta{font-size:11.5px;color:var(--dim);margin-top:4px;font-family:var(--mono)}
.chron{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.chron-row{display:grid;grid-template-columns:minmax(120px,1.4fr) 3fr auto;
           gap:10px;align-items:center;font-size:11.5px}
.chron-bar{height:6px;border-radius:4px;background:var(--panel-2);
           border:1px solid var(--line);overflow:hidden}
.chron-fill{height:100%;background:var(--bad);border-radius:4px;min-width:2px}
@media (max-width:720px){ .chron-row{grid-template-columns:1fr auto;}
                          .chron-row .chron-bar{grid-column:1/-1} }

/* ── Прогоны ─────────────────────────────────────────────────────────────── */
.runs{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.run-row{display:grid;grid-template-columns:88px minmax(140px,2fr) 1fr 76px 70px 44px;
         gap:10px;align-items:center;padding:8px 13px;font-size:12px;
         border-bottom:1px solid var(--line)}
.run-row:last-child{border-bottom:none}
.run-row.head{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
              color:var(--dim);background:var(--panel-2)}
.run-row.bad{background:var(--bad-bg);color:#F5C8C3}
.run-row.bad .dim{color:#E0A9A3}
.drift-row{display:grid;grid-template-columns:minmax(120px,2fr) auto auto;
           gap:10px;align-items:center;font-size:11.5px}
@media (max-width:720px){
  .run-row{grid-template-columns:70px 1fr 60px;}
  .run-row > :nth-child(3),.run-row > :nth-child(5){display:none}
  .drift-row{grid-template-columns:1fr auto}
  .drift-row > :nth-child(2){grid-column:1/-1}
}

/* ── Офис (вид сверху) ───────────────────────────────────────────────────── */
/* Фигурки двигаются CSS-переходом по left/top. Поэтому раздел НЕ перерисовывает
   узлы при обновлении — иначе переход обрывался бы и «хождение» превратилось бы
   в телепортацию. */
.office{position:relative;border:1px solid var(--line);border-radius:12px;
        background:var(--panel);padding:10px;margin-bottom:11px;overflow:hidden}
.rooms{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
       gap:8px;height:clamp(260px,42vh,380px)}
.room{border:1px dashed var(--line-2);border-radius:10px;background:var(--panel-2);
      position:relative;transition:background .5s,border-color .5s,box-shadow .5s}
.room.lit{border-color:var(--accent);border-style:solid;
          background:linear-gradient(180deg,rgba(122,214,168,.10),transparent 70%),var(--panel-2);
          box-shadow:inset 0 0 22px rgba(122,214,168,.10)}
.room-lbl{position:absolute;top:7px;left:9px;font-size:10.5px;letter-spacing:.06em;
          text-transform:uppercase;color:var(--dim);display:flex;gap:5px;align-items:center}
.room.lit .room-lbl{color:var(--text)}
.room-ico{font-size:13px}
/* Слой людей лежит ровно поверх сетки комнат, отсюда те же отступы. */
.people{position:absolute;inset:10px;pointer-events:none}
.person{position:absolute;transform:translate(-50%,-50%);text-align:center;
        transition:left 1.6s cubic-bezier(.45,.05,.35,1),top 1.6s cubic-bezier(.45,.05,.35,1);
        pointer-events:auto}
.person .body{
  width:30px;height:30px;line-height:28px;font-size:15px;border-radius:50%;
  background:var(--panel);border:2px solid var(--c,#8A8577);margin:0 auto;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.person .tag{font-size:9.5px;color:var(--dim);margin-top:3px;white-space:nowrap;
             font-family:var(--mono)}
.person.busy .body{animation:walk 1.1s ease-in-out infinite}
.person.busy .tag{color:var(--text)}
.person.down{opacity:.42}
.person.down .body{transform:rotate(-72deg);border-style:dotted}
@keyframes walk{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.office-foot{font-size:11px;margin:-4px 0 4px 2px}
.who{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px;margin-top:9px}
.who-row{display:flex;gap:9px;align-items:flex-start;font-size:12px;opacity:.6}
.who-row.on{opacity:1}
.who-row.dead{opacity:.4}
.who-ico{font-size:16px;line-height:1}
@media (prefers-reduced-motion:reduce){
  .person{transition:none} .person.busy .body{animation:none}
}
@media (max-width:720px){
  .rooms{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);height:56vh}
  .person .tag{display:none}
}