:root{--panel-w:380px;--panel-duration:280ms;--overlay-duration:200ms}
@media (max-width:420px){:root{--panel-w:92vw}}
.panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity var(--overlay-duration) ease}
.panel-overlay[data-open="true"]{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.panel-overlay{transition:none}}
.side-panel{position:fixed;top:0;right:0;width:var(--panel-w);max-width:100vw;height:100dvh;background:#fff;transform:translate3d(100%,0,0);transition:transform var(--panel-duration) cubic-bezier(.2,.8,.2,1);box-shadow:-16px 0 32px rgba(0,0,0,.15);display:flex;flex-direction:column;z-index:50}
.side-panel[data-open="true"]{transform:translate3d(0,0,0)}
@media (prefers-reduced-motion:reduce){.side-panel{transition:none}}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #eee}
.panel-title{font:600 16px/1.2 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}
.panel-body{padding:12px 16px;overflow:auto;flex:1}
.panel-footer{padding:16px;border-top:1px solid #eee}
.btn{appearance:none;border:0;padding:10px 14px;border-radius:12px;cursor:pointer;font:500 14px/1 ui-sans-serif,system-ui}
.btn-primary{background:#111;color:#fff}
.btn-ghost{background:#f5f5f5;color:#111}
.btn-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f5f5f5}
:where(button,[role="button"],a,input,select,textarea):focus-visible{outline:3px solid #111;outline-offset:2px}