/* Scoped to the native mobile drawer; slide width and page geometry stay native. */
html.mobile-drawer-open { overflow: hidden; }
#sidebar #menu-mask { background: rgba(15, 23, 42, .46); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
[data-theme='dark'] #sidebar #menu-mask { background: rgba(0, 0, 0, .62); }
#sidebar #sidebar-menus {
  --drawer-width: min(330px, calc(100vw - 20px));
  width: var(--drawer-width);
  right: calc(0px - var(--drawer-width));
  padding: max(12px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  height: 100%;
  height: 100dvh;
  border-radius: 24px 0 0 24px;
  box-shadow: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#sidebar #sidebar-menus.open { box-shadow: -12px 0 40px rgba(15, 23, 42, .12); }
#sidebar .drawer-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 12px; background: var(--sidebar-bg); }
#sidebar .drawer-title { color: var(--font-color); font-size: 15px; font-weight: 700; }
#sidebar .drawer-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: rgba(73,177,245,.1); color: var(--font-color); font-size: 18px; cursor: pointer; }
#sidebar .drawer-close[hidden] { display: none; }
#sidebar .drawer-profile { padding: 20px 16px 16px; border: 1px solid rgba(73,177,245,.13); border-radius: 20px; background: linear-gradient(135deg, rgba(73,177,245,.12), rgba(161,102,171,.07)); text-align: center; }
#sidebar .drawer-profile .avatar-img { display: block; width: 72px; height: 72px; margin: 0 auto 10px; border: 3px solid var(--card-bg); box-shadow: 0 4px 14px rgba(15,23,42,.1); }
#sidebar .drawer-profile .avatar-img img:hover { transform: none; }
#sidebar .drawer-author { color: var(--font-color); font-size: 18px; font-weight: 700; line-height: 1.5; }
#sidebar .drawer-description { margin: 6px 0 0; color: var(--font-color); opacity: .75; font-size: 12px; line-height: 1.8; }
#sidebar #sidebar-menus .site-data { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 12px 0 22px; padding: 0; }
#sidebar #sidebar-menus .site-data > a { display: flex; flex-direction: column-reverse; justify-content: center; min-height: 68px; padding: 8px 4px; border: 1px solid rgba(73,177,245,.1); border-radius: 14px; background: var(--card-bg); }
#sidebar #sidebar-menus .site-data .headline { font-size: 12px; line-height: 1.8; }
#sidebar #sidebar-menus .site-data .length-num { margin: 0; color: var(--font-color); font-size: 20px; font-weight: 700; line-height: 1.4; }
#sidebar .drawer-section-label { margin: 0 12px 8px; color: var(--font-color); opacity: .6; font-size: 12px; letter-spacing: 2px; }
#sidebar #sidebar-menus .menus_items { margin: 0; padding: 0; background: transparent; box-shadow: none; }
#sidebar #sidebar-menus .menus_items .site-page { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 5px 0; padding: 6px 12px; border-radius: 14px; color: var(--font-color); font-size: 15px; line-height: 1.5; }
#sidebar #sidebar-menus .menus_items .site-page i:first-child { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; background: rgba(73,177,245,.1); color: #49b1f5; text-align: center; }
#sidebar #sidebar-menus .menus_items .site-page > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#sidebar #sidebar-menus .menus_items a.site-page::after { width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; opacity: .35; content: ''; transform: rotate(45deg); }
#sidebar #sidebar-menus .menus_items .site-page:hover,
#sidebar #sidebar-menus .menus_items .site-page[aria-current] { background: rgba(73,177,245,.12); box-shadow: none; transform: none; }
#sidebar #sidebar-menus .menus_items .site-page[aria-current] { box-shadow: inset 3px 0 #49b1f5; font-weight: 700; }
#sidebar a:focus-visible, #sidebar button:focus-visible { outline: 2px solid #49b1f5; outline-offset: 2px; }
#sidebar .drawer-close:hover { background: rgba(73,177,245,.2); }
@media (prefers-reduced-motion: reduce) {
  #sidebar #sidebar-menus, #sidebar .site-page, #sidebar .avatar-img img { transition: none; }
}