/* Оформление новой оболочки. Палитра — из основной программы: сравниваем
   структуру, а не цвета. */
.sh-nav{margin-top:2px}
.sh-groups{display:flex;gap:4px;flex-wrap:wrap}
.sh-g{background:none;border:1px solid #3A433A;border-radius:var(--ri);color:var(--dim-d);
  padding:10px 16px;cursor:pointer;font:600 calc(13px * var(--fs,1)) var(--sans);letter-spacing:.03em;
  text-transform:uppercase;display:flex;align-items:center;gap:7px;
  white-space:nowrap}   /* «Рабочий стол» переносился на две строки и ломал ряд */
.sh-g i{font-style:normal;opacity:.7;font-size:calc(13px * var(--fs, 1))}
.sh-g[aria-selected="true"]{background:var(--paper);color:var(--ink);
  border-color:var(--ink);font-weight:700}
.sh-g[aria-selected="true"] i{opacity:1}
.sh-sub{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;padding-bottom:4px}
.sh-t{background:none;border:1px solid #2A322A;border-radius:var(--ri);color:var(--dim-d);padding:7px 13px;
  cursor:pointer;font:500 calc(13px * var(--fs,1)) var(--sans);letter-spacing:.01em}
.sh-t[aria-selected="true"]{background:#2A322A;color:#fff}
.sh-role{display:inline-flex;align-items:center;gap:6px;margin:0 0 0 10px;font:calc(13px * var(--fs,1)) var(--sans);color:var(--dim-d)}
.sh-role select{font:calc(13px * var(--fs,1)) var(--sans);background:#242C24;color:var(--dim-d);
  border:1px solid #3A423A;border-radius:6px;padding:4px 8px}
.sh-hint{opacity:.7;margin-left:6px}

/* Рабочий стол */
.sh-kpi{display:grid;gap:8px;grid-template-columns:1fr;margin-bottom:14px}
@media(min-width:700px){.sh-kpi{grid-template-columns:repeat(3,1fr)}}
.sh-card{background:var(--ink);color:var(--panel);padding:14px 16px;border-radius:var(--r)}
.sh-card .lab{font:600 calc(12.5px * var(--fs,1)) var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim-d)}
.sh-card .val{font:700 calc(26px * var(--fs,1)) var(--sans);line-height:1.15;margin-top:3px}
.sh-card .sub{font:calc(13px * var(--fs,1)) var(--sans);color:var(--dim-d);margin-top:3px}
.sh-card.warn .val{color:#E5B45C}

.sh-go{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:700px){.sh-go{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sh-go{grid-template-columns:repeat(3,1fr)}}
.sh-gocard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:5px}
.sh-gocard:hover{border-color:var(--accent)}
.sh-gocard .t{font:700 calc(15px * var(--fs,1)) var(--sans)}
.sh-gocard .d{font:calc(13px * var(--fs,1)) var(--sans);color:var(--ink3)}

/* «Примерить роль» — админский инструмент за столом; на телефоне и
   планшете только съедает строку шапки. */
@media(max-width:900px){.sh-role{display:none}}
@media(max-width:560px){
  .sh-t{padding:8px 12px}
  .sh-g{padding:9px 11px;font-size:calc(12.5px * var(--fs, 1))}
  .sh-groups{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sh-groups::-webkit-scrollbar{display:none}
  .sh-card .val{font-size:calc(21px * var(--fs, 1))}
}