.drawernav-wrapper { position: relative; z-index: 9999; }
.drawernav-toggle { cursor: pointer; background: transparent; border: none; font-size: 16px; }
.drawernav-hamburger { display:inline-block; width:22px; }
.drawernav-hamburger span { display:block; height:2px; margin:4px 0; background:#000; }


.drawernav-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:9998; }


.drawernav-drawer { position:fixed; top:0; right:0; height:100%; transform:translateX(100%); transition:transform .35s ease; z-index:9999; }
.drawernav-drawer.open { transform:translateX(0); }


.drawernav-panels { height:100%; display:flex; flex-direction:row; transition:transform .35s ease; }
.drawernav-panel { width:320px; max-width:100vw; background:#fff; height:100%; box-shadow: -4px 0 10px rgba(0,0,0,0.12); overflow:auto; }


.drawernav-panel-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eee; }
.drawernav-panel-title { font-weight:600; }
.drawernav-panel-back, .drawernav-panel-close { background:transparent; border:none; font-size:18px; cursor:pointer; }


.drawernav-list { list-style:none; margin:0; padding:8px 0; }
.drawernav-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #f3f3f3; }
.drawernav-link { text-decoration:none; color:#222; display:block; flex:1; }
.drawernav-expand { background:transparent; border:none; font-size:16px; cursor:pointer; }


/* 当容器宽度自适应时，使用 data-width 设置每个 panel 宽度 */
.drawernav-wrapper[data-width] .drawernav-panel { width: inherit; }


/* 打开 backdrop */
.drawernav-drawer.open + .drawernav-backdrop { display:block; }


@media (max-width:480px) {
.drawernav-panel { width: 85vw; }
}