html.sd-locked{overflow:hidden;overscroll-behavior:none}
dialog.syoper-drawer{--sd-pink:#f50057;--sd-ink:#17191f;--sd-grey:#626b7a;position:fixed;inset:0 0 0 auto;margin:0;box-sizing:border-box;width:min(84vw,440px);max-width:none;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border:0;border-radius:24px 0 0 24px;padding:0;background:#f5f6f8;color:var(--sd-ink);box-shadow:-12px 0 48px #17191f20;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;direction:ltr;animation:sd-enter .22s ease-out;touch-action:pan-y}
.syoper-drawer[open]{display:flex;flex-direction:column}
.syoper-drawer::backdrop{background:rgb(0 0 0 / .46);animation:sd-dim .22s ease-out}
.syoper-drawer.sd-closing{animation:sd-exit .2s ease-in forwards}.syoper-drawer.sd-closing::backdrop{animation:sd-undim .2s ease-in forwards}
.syoper-drawer *,.sd-confirm *{box-sizing:border-box}
.sd-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(19px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 14px 18px;background:#fff;box-shadow:inset 0 7px 0 #fff0f5}
.sd-logo{display:block;width:min(72%,222px);height:auto;mix-blend-mode:multiply;object-fit:contain}
.syoper-drawer button{font:inherit;cursor:pointer}
dialog.syoper-drawer .sd-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:10px;border:0;background:transparent;color:#17191f;border-radius:0;box-shadow:none;-webkit-tap-highlight-color:transparent}
dialog.syoper-drawer .sd-close:focus{outline:none;box-shadow:none}
dialog.syoper-drawer .sd-close:focus-visible svg{stroke-width:2.6;color:var(--sd-pink)}
.syoper-drawer svg,.sd-confirm svg{display:block;width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sd-scroll{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 16px;background:linear-gradient(#fff 0 114px,#f5f6f8 200px)}
.syoper-drawer a{color:var(--sd-ink);text-decoration:none}
.sd-profile{display:flex;align-items:center;gap:12px;min-height:100px;padding:12px 0 18px}
.sd-avatar{display:grid;place-items:center;flex:0 0 60px;width:60px;height:60px;padding:3px;border:1.5px solid var(--sd-pink);border-radius:50%;background:#fff0f5;overflow:hidden;color:#ac0040;font-weight:800}
.sd-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.sd-profile-copy{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}.sd-profile-copy strong{font-size:17px;line-height:1.25;overflow-wrap:anywhere}.sd-profile-copy>span{color:var(--sd-grey);font-size:13px;line-height:1.35}
.sd-profile>svg,.sd-item>svg{width:18px;height:18px;color:#626b7a}
.sd-nav{display:grid;gap:8px}
.syoper-drawer .sd-item{display:flex;align-items:center;gap:11px;min-height:76px;padding:11px 12px;border:1px solid #e9ebef;border-radius:16px;background:#fff;box-shadow:0 2px 6px #17191f02}
.sd-icon{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;background:#f5f6f8}.sd-icon svg{width:26px;height:26px}
.sd-item-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.sd-item-copy strong{font-size:15px;font-weight:750;line-height:1.25}.sd-item-copy>span{font-size:12px;line-height:1.35;color:var(--sd-grey)}
.syoper-drawer .sd-wallet{background:#fff0f6;border-color:#ffdce9}.sd-wallet .sd-icon{background:#ffe5ef;color:var(--sd-pink)}.sd-wallet>svg,.sd-rewards .sd-icon{color:var(--sd-pink)}
/* Keep the normal menu colours; show the QR accent only while pressed. */
.syoper-drawer .sd-qr{-webkit-tap-highlight-color:transparent}
.syoper-drawer .sd-qr:active{background:#fff0f6;border-color:#ff80ab}
.syoper-drawer .sd-qr:active .sd-icon{background:#ffe4ee;color:#ff0057}
.syoper-drawer .sd-qr:active>svg{color:#ff0057}
.syoper-drawer .sd-logout,.sd-confirm .sd-logout{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:12px;margin:18px 0 0;border:0;border-radius:14px;color:#fff;background:#f50057;font:700 16px/1.3 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer}
.sd-confirm{box-sizing:border-box;width:calc(100vw - 40px);max-width:360px;border:1px solid #ececf0;border-radius:22px;padding:24px;background:#fff;color:#17191f;box-shadow:0 20px 90px #17191f30;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}.sd-confirm::backdrop{background:#17191f80}.sd-confirm h2{margin:0 0 12px;font-size:21px;line-height:1.25}.sd-confirm p{margin:0 0 16px;font-size:14px;line-height:1.5;color:#626b7a}.sd-confirm .sd-cancel{width:100%;margin-top:8px;padding:12px;min-height:44px;border:0;background:transparent;color:#17191f;font:600 15px/1.3 inherit;cursor:pointer}.sd-confirm .sd-error{color:#b00039}.sd-confirm button:disabled{opacity:.6;cursor:wait}
.syoper-drawer :is(a,button):focus-visible,.sd-confirm button:focus-visible{outline:3px solid #17191f;outline-offset:2px}
@media(max-width:360px){.sd-header{padding-left:12px;padding-right:12px;gap:6px}.sd-scroll{padding-left:10px;padding-right:max(10px,env(safe-area-inset-right,0px))}.sd-avatar{width:48px;height:48px;flex-basis:48px}.sd-profile{gap:9px;min-height:90px}.sd-profile-copy strong{font-size:15px}.syoper-drawer .sd-item{gap:8px;padding:10px;min-height:74px}.sd-icon{width:36px;height:36px;flex-basis:36px}.sd-item-copy strong{font-size:14px}.sd-item-copy>span{font-size:11px}}
@keyframes sd-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes sd-exit{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes sd-dim{from{background:transparent}to{background:rgb(0 0 0 / .46)}}@keyframes sd-undim{to{background:transparent}}
@media(prefers-reduced-motion:reduce){dialog.syoper-drawer,.syoper-drawer::backdrop,.syoper-drawer.sd-closing,.syoper-drawer.sd-closing::backdrop{animation:none}}