/* Native modal drawer: focus trap, inert background and right-side motion. */
html:has(#menu-dialog[open]) { scrollbar-gutter: auto; }
.side-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  padding: 0;
  width: min(360px, calc(100vw - 36px));
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-radius: 22px 0 0 22px;
  background: #fff;
  box-shadow: -10px 0 45px #14122520;
  overflow: hidden;
  color: var(--ink);
}
.side-drawer[open] { display: flex; flex-direction: column; animation: drawer-in .3s cubic-bezier(.2,.7,.2,1); }
.side-drawer::backdrop { background: #11112378; backdrop-filter: blur(1px); animation: drawer-dim-in .25s ease; }
.side-drawer[open].is-closing { animation: drawer-out .25s cubic-bezier(.4,0,.7,.3) forwards; pointer-events: none; }
.side-drawer.is-closing::backdrop { animation: drawer-dim-out .25s ease forwards; }
.drawer-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: calc(12px + env(safe-area-inset-top)) 15px 8px 24px; }
.drawer-header h2 { font-size: 15px; letter-spacing: -.4px; font-weight: 700; }
.drawer-close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: transparent; }
.drawer-close .icon { width: 25px; height: 25px; stroke-width: 1.5; }
.drawer-close:hover { background: #f7f5f9; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 3px 22px 24px; scrollbar-width: thin; scrollbar-color: #dfdbe5 transparent; }
.drawer-account { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 98px; padding: 20px; border: 1px solid #f1eff4; border-radius: 18px; background: #fff; box-shadow: 0 5px 25px #1b17310d; text-align: left; margin-bottom: 14px; }
.drawer-account strong { display: block; font-size: 19px; line-height: 1.45; font-weight: 700; letter-spacing: -.65px; }
.drawer-account small { display: block; margin-top: 7px; font-size: 12px; color: var(--muted); letter-spacing: -.25px; }
.drawer-account .icon { width: 20px; height: 20px; stroke-width: 1.5; }
.drawer-library, .drawer-home, .drawer-search-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 53px; padding: 12px 3px; text-align: left; font-size: 14px; font-weight: 600; }
.drawer-library > .icon, .drawer-home > .icon, .drawer-search-link > .icon { width: 19px; height: 19px; stroke-width: 1.5; color: #67616f; }
.drawer-library > .icon:last-child, .drawer-home > .icon:last-child, .drawer-search-link > .icon:last-child { width: 15px; height: 15px; margin-left: auto; color: #a7a1ae; }
.drawer-library { border-bottom: 1px solid var(--line); margin-bottom: 8px; padding-bottom: 16px; }
.drawer-home { color: #6c567f; }
.drawer-nav-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 49px; padding: 12px 3px; border-bottom: 1px solid #f6f4f8; font-size: 14px; font-weight: 600; }
.drawer-nav-link > .icon { width: 15px; height: 15px; color: #aaa1b3; stroke-width: 1.5; }
.drawer-nav-link:hover, .drawer-setting-link:hover { color: #75518f; background: #faf8fc; }
.drawer-nav-link[aria-current], .drawer-setting-link[aria-current] { color: #8c659f; }
.drawer-setting-link { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 3px; font-size: 13px; font-weight: 600; }
.drawer-setting-link > .icon:first-child { width: 20px; height: 20px; color: #777080; }
.drawer-setting-link > .icon:last-child { width: 15px; height: 15px; margin-left: auto; color: #aaa1b3; stroke-width: 1.5; }
.drawer-group { border-bottom: 1px solid #f6f4f8; }
.drawer-group summary, .drawer-settings summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 12px 3px; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 7px; }
.drawer-group summary::-webkit-details-marker, .drawer-settings summary::-webkit-details-marker { display: none; }
.drawer-group summary:hover, .drawer-settings summary:hover { background: #faf8fc; }
.drawer-group summary:focus-visible, .drawer-settings summary:focus-visible { outline: 2px solid #8764c8; outline-offset: 2px; }
.drawer-chevron { width: 16px; height: 16px; margin-left: auto; transform: rotate(90deg); color: #9b95a4; transition: transform .18s ease; }
details[open] > summary .drawer-chevron { transform: rotate(270deg); }
.drawer-submenu { padding: 3px 12px 11px; margin: 0 0 9px; border-radius: 11px; background: #faf8fc; }
.drawer-submenu > a, .drawer-submenu > button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 10px 7px; text-align: left; border-radius: 7px; font-size: 12px; color: #756b7f; }
.drawer-submenu > :hover { color: #6e428a; background: #f0eaf6; }
.drawer-submenu .drawer-category-link { color: #6e428a; font-weight: 650; border-bottom: 1px solid #eee9f3; border-radius: 0; margin-bottom: 3px; }
.drawer-category-link .icon { width: 15px; height: 15px; }
.drawer-category-link[aria-current] { color: var(--pink); }
.drawer-search-link { margin-top: 8px; color: #777080; }
.drawer-bottom { flex: 0 0 auto; padding: 0 22px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -5px 18px #21153503; max-height: 48dvh; overflow-y: auto; overscroll-behavior: contain; }
.drawer-settings > summary { min-height: 56px; font-size: 13px; }
.drawer-settings > summary > .icon:first-child { width: 20px; height: 20px; color: #777080; }
.drawer-settings-content { padding: 0 2px 9px; }
.drawer-setting { display: flex; align-items: center; position: relative; gap: 10px; padding: 10px 0; min-height: 61px; cursor: pointer; }
.drawer-setting > span:first-child { flex: 1; min-width: 0; }
.drawer-setting strong { display: block; font-size: 12px; font-weight: 600; }
.drawer-setting small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.drawer-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drawer-switch { flex: 0 0 36px; width: 36px; height: 21px; padding: 3px; border-radius: 20px; background: #ddd8e3; transition: background .18s ease; }
.drawer-switch::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #20133418; transition: transform .18s ease; }
.drawer-setting input:checked + .drawer-switch { background: #82619d; }
.drawer-setting input:checked + .drawer-switch::after { transform: translateX(15px); }
.drawer-setting input:focus-visible + .drawer-switch { outline: 3px solid #ae8bc7; outline-offset: 3px; }
.drawer-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 5px; font-size: 10px; color: #b1a8ba; }
.drawer-footer button { font-size: 10px; color: #908697; text-decoration: underline; padding: 3px 0; }
@keyframes drawer-in { from { transform: translateX(102%); } to { transform: translateX(0); } }
@keyframes drawer-out { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes drawer-dim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-dim-out { from { opacity: 1; } to { opacity: 0; } }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
html.reduce-motion dialog[open], html.reduce-motion dialog[open].is-closing, html.reduce-motion dialog::backdrop { animation-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) {
  .side-drawer[open], .side-drawer[open].is-closing, .side-drawer::backdrop, .side-drawer.is-closing::backdrop { animation: none; }
  .drawer-chevron, .drawer-switch, .drawer-switch::after { transition: none; }
}
@media (max-height: 620px) {
  .drawer-header { min-height: 54px; padding-block: 6px; }
  .drawer-account { min-height: 86px; padding-block: 14px; }
}