.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(39, 36, 33, 0.24);
  opacity: 0;
  transition: opacity 260ms ease;
}
.sidebar-backdrop.is-open { opacity: 1; }
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc(50% - 260px));
  z-index: 40;
  width: min(84vw, 340px);
  padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  color: #282522;
  background: #fffdf9;
  border-right: 1px solid #e7e1da;
  box-shadow: 18px 0 48px rgba(70, 54, 43, 0.14);
  transform: translateX(-104%);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 300ms;
}
.sidebar.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sidebar-identity { min-width: 0; display: flex; align-items: center; gap: 13px; }
.sidebar-avatar { width: 48px; height: 48px; flex: 0 0 48px; object-fit: cover; border: 1px solid #e7e1da; border-radius: 50%; background: #eee9e3; }
.sidebar-brand { display: grid; gap: 3px; font-family: Georgia, "Songti SC", serif; }
.sidebar-brand strong { font-size: 20px; line-height: 1.1; font-weight: 600; }
.sidebar-brand span { color: #8e877f; font-size: 12px; font-style: normal; }
.sidebar-close { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; color: #8e877f; background: transparent; border: 0; border-radius: 8px; }
.sidebar-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sidebar-nav { min-height: 0; margin-top: 34px; display: flex; flex: 1; flex-direction: column; overflow-y: auto; }
.sidebar-section { padding: 12px 0; border-top: 1px solid #e7e1da; }
.sidebar-section:first-child { border-top: 0; }
.sidebar-section-settings { margin-top: auto; }
.sidebar-section-label { padding: 0 12px 8px; display: block; color: #aaa29a; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; }
.sidebar-item {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: 13px;
  align-items: center;
  color: #5f5953;
  background: transparent;
  border: 0;
  border-radius: 7px;
  text-align: left;
  font-family: Georgia, "Songti SC", serif;
  font-size: 16px;
}
.sidebar-icon { width: 24px; height: 24px; display: grid; place-items: center; color: #aaa29a; }
.sidebar-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-item-label { min-width: 0; }
.sidebar-item.active { color: #b95f55; background: #f8ebe8; }
.sidebar-item.active .sidebar-icon { color: currentColor; }
.sidebar-item:hover { color: #5f5953; background: transparent; }
.sidebar-item:hover .sidebar-icon { color: #aaa29a; }
.sidebar-item.active:hover { color: #b95f55; background: #f8ebe8; }
.sidebar-item.active:hover .sidebar-icon { color: currentColor; }
.sidebar { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 180ms; }
.sidebar.is-open { transition-delay: 0s; }
.sidebar-count { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: #cf6658; border-radius: 999px; font-family: Inter, sans-serif; font-size: 9px; }
.sidebar-count[hidden] { display: none; }
.relationship-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 180ms ease; }
.relationship-parent[aria-expanded="true"] .relationship-chevron { transform: rotate(90deg); }
.relationship-submenu { padding: 1px 0 5px 49px; }
.relationship-submenu[hidden] { display: none; }
.relationship-subitem { width: 100%; min-height: 36px; padding: 0; display: flex; align-items: center; gap: 12px; color: #77716b; background: transparent; border: 0; text-align: left; font-family: "Avenir Next", "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif; font-size: 12.5px; }
.relationship-subitem span { width: 5px; height: 5px; flex: none; border-radius: 50%; background: #b7b1ab; }
.relationship-subitem.active { color: #b95f55; font-weight: 600; }
.relationship-subitem.active span { background: currentColor; }
@media (hover: hover) {
  .sidebar-close:hover { color: #cf6658; background: #f8ebe8; }
  .sidebar-item:hover { color: #b95f55; background: #f8ebe8; }
  .sidebar-item:hover .sidebar-icon { color: currentColor; }
  .relationship-subitem:hover { color: #b95f55; }
  .relationship-subitem:hover span { background: currentColor; }
}

@media (min-width: 521px) {
  .sidebar { left: calc(50% - 260px); }
}