.v33-sidebar { position: sticky; top: 0; z-index: 40; height: 100vh; overflow-y: auto; padding: 18px 14px; color: #ecf5ff; background: linear-gradient(180deg, var(--v33-sidebar), #0b1b2d); }
.v33-sidebar__brand { display: flex; align-items: center; gap: 12px; padding: 12px 10px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.v33-sidebar__brand b { display: block; letter-spacing: .12em; }
.v33-sidebar__brand small { display: block; margin-top: 3px; color: #a9bfd3; font-size: .7rem; }
.v33-sidebar__mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); color: #d9ffe9; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px rgba(0,0,0,.18); }
.v33-sidebar__mark svg { width: 23px; height: 23px; display: block; stroke: currentColor; }
.v33-sidebar__nav { display: grid; gap: 5px; padding: 18px 0; }
.v33-sidebar__link { display: flex; width: 100%; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; color: #dce9f5; background: transparent; text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.v33-sidebar__link:hover { color: #fff; background: rgba(255,255,255,.08); }
.v33-sidebar__link.is-active { color: #fff; border-color: rgba(255,255,255,.12); background: var(--v33-brand); box-shadow: inset 3px 0 0 var(--v33-accent); }
.v33-sidebar__logout { margin-top: 10px; font: inherit; }
.v33-sidebar__footer { margin-top: 8px; padding: 14px 12px; border-radius: 10px; color: #a9bfd3; background: rgba(255,255,255,.05); font-size: .78rem; line-height: 1.55; }

.v33-sidebar__menu-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  background: linear-gradient(145deg,#35554a,#173b30);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.20), 0 5px 12px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.v33-sidebar__menu-icon svg { display: block; width: 19px; height: 19px; color: inherit; filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }

.v33-sidebar__link:hover .v33-sidebar__menu-icon { transform: translateY(-1px) scale(1.03); filter: brightness(1.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 17px rgba(0,0,0,.23); }
.v33-sidebar__link.is-active .v33-sidebar__menu-icon { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(255,255,255,.10), 0 0 18px rgba(255,205,58,.26), 0 8px 18px rgba(0,0,0,.24); }

/* Generic per-menu-item accent colors — swap freely per product line */
.v33-sidebar__menu-icon--home { background: linear-gradient(145deg,#2f80ed,#1559aa); color: #ffffff; }
.v33-sidebar__menu-icon--orders { background: linear-gradient(145deg,#00a88f,#087565); color: #ffffff; }
.v33-sidebar__menu-icon--create { background: linear-gradient(145deg,#43b85b,#237b36); color: #ffffff; }
.v33-sidebar__menu-icon--customers { background: linear-gradient(145deg,#19aeb8,#087985); color: #ffffff; }
.v33-sidebar__menu-icon--locations { background: linear-gradient(145deg,#ef5350,#b91f25); color: #ffffff; }
.v33-sidebar__menu-icon--building { background: linear-gradient(145deg,#f0a13d,#b9720f); color: #ffffff; }
.v33-sidebar__menu-icon--elevator { background: linear-gradient(145deg,#5b6ee1,#3947a8); color: #ffffff; }
.v33-sidebar__menu-icon--notifications { background: linear-gradient(145deg,#8b69d8,#5433a3); color: #ffffff; }
.v33-sidebar__menu-icon--admin { background: linear-gradient(145deg,#9a7668,#60453c); color: #ffffff; }

.v33-sidebar__logout > span:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(145deg,#d74444,#8f1d1d);
  color: #ffffff;
  font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.18);
}