/* =========================================================
   CSS БЛОКА: ОБОЛОЧКА И SIDEBAR
   ========================================================= */
.app-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;
  padding:28px 18px 20px;
  border-right:1px solid var(--line);
  background:rgba(9,10,14,.84);
  backdrop-filter:blur(22px);
  display:flex;flex-direction:column;z-index:20
}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 28px; justify-content: center;}
.brand__mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent);color:#0a0b0e;font-weight:900;font-family:"Manrope",sans-serif
}
.brand strong{display:block;font:800 15px/1 "Manrope",sans-serif;letter-spacing:.12em}
.brand span{display:block;margin-top:6px;color:var(--muted);font-size:11px; text-align: center;}
.nav{display:flex;flex-direction:column;gap:6px}
.nav__item{
  border:0;background:transparent;color:#b2b7c2;text-align:left;border-radius:14px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.2s ease
}
.nav__item span{width:18px;text-align:center;color:#707789}
.nav__item:hover{background:rgba(255,255,255,.04);color:#fff}
.nav__item.active{background:#171a22;color:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.nav__item.active span{color:var(--accent)}
.sidebar__footer{margin-top:auto;padding:16px 10px 0}
.mini-score{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}
.mini-score span{color:var(--muted);font-size:12px}
.mini-score strong{font:800 28px/1 "Manrope",sans-serif}
.ghost-btn,.primary-btn,.text-btn,.icon-btn,.panel-add{
  border:0;cursor:pointer;transition:.2s ease
}
.ghost-btn{
  border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:12px;padding:10px 13px
}
.ghost-btn:hover{background:rgba(255,255,255,.07)}
.sidebar__footer .ghost-btn{width:100%;font-size:12px;color:var(--muted)}

@media(max-width: 900px) {
  .nav{display: flex;
    gap: 6px;
    align-items: center;
    flex-direction: column;
    height: 59vh;
    /* text-align: right; */
    justify-content: space-evenly;}
}