#panelNotificationCenter{position:fixed;top:12px;right:18px;z-index:990;font:14px system-ui}#panelNotificationCenter button{border:1px solid #9b8243;border-radius:9px;background:#252116;color:#f0d99b;padding:10px 13px;cursor:pointer}#panelNotificationCount{display:inline-flex;min-width:20px;justify-content:center;border-radius:20px;background:#d3b56d;color:#171717;margin-left:5px}#panelNotificationDrawer{position:absolute;right:0;top:48px;width:360px;max-width:calc(100vw - 24px);max-height:75vh;overflow:auto;padding:18px;background:#171c24;color:#eff2f6;border:1px solid #574b31;border-radius:14px;box-shadow:0 12px 45px #0007;box-sizing:border-box}#panelNotificationDrawer[hidden]{display:none}#panelNotificationDrawer h2{font-size:18px;margin:0 0 12px}#panelPushStatus,.panel-notification-hint{font-size:12px;line-height:1.6;color:#bcc5d2}.panel-notification-item{display:grid;gap:6px;padding:14px 0;border-top:1px solid #343c49;color:#edf1f7;text-decoration:none;font-size:13px;line-height:1.5}.panel-notification-item strong{color:#e3c67b}.panel-notification-item small{color:#a8b4c5;font-size:11px}#panelNotificationToasts{position:fixed;top:68px;left:50%;transform:translateX(-50%);width:min(500px,calc(100vw - 24px));z-index:1000;display:grid;gap:10px}.panel-notification-toast{display:flex;align-items:flex-start;gap:15px;border:1px solid #b79b51;background:#181d24;color:#eef2f6;padding:15px 18px;border-radius:12px;box-shadow:0 6px 30px #0006;font:14px system-ui;line-height:1.5}.panel-notification-toast a{flex:1;display:grid;gap:4px;color:inherit;text-decoration:none}.panel-notification-toast strong{color:#e1c475}.panel-notification-toast button{border:0;color:#dedede;background:none;font-size:22px;cursor:pointer}@media(max-width:600px){#panelNotificationCenter{top:9px;right:9px}#panelNotificationToggle{font-size:11px;padding:8px!important}#panelNotificationToasts{top:62px}}

/* In-flow bell: closed notifications never cover order controls. */
#panelNotificationCenter{position:static;top:auto;right:auto;display:flex;justify-content:flex-end;align-items:center;flex:0 0 auto;margin:8px 16px;z-index:auto}
#panelNotificationCenter.panel-notification-docked{margin:0 0 0 auto;align-self:center}
#panelNotificationCenter #panelNotificationToggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;width:38px;height:38px;min-width:38px;padding:7px!important;border-radius:12px;background:var(--card,#fff7fa);border:1px solid var(--line,#d5bdc8);color:var(--text,#553449);font:inherit}
#panelNotificationToggle svg{width:20px;height:20px;flex:none}
#panelNotificationCount{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 3px;box-sizing:border-box;align-items:center;line-height:1;font-size:10px;margin:0;background:var(--gold,#a13266);color:var(--bg,#fff);border:1px solid var(--card,#fff)}
#panelNotificationDrawer{position:fixed;top:max(18px,env(safe-area-inset-top));right:18px;width:380px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 130px);z-index:1001;padding:0 18px 18px;overscroll-behavior:contain}
#panelNotificationDrawer .panel-notification-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:#171c24;padding:16px 0 12px;z-index:1;border-bottom:1px solid #343c49}
#panelNotificationDrawer .panel-notification-heading h2{margin:0}
#panelNotificationClose{flex:none;min-height:36px;padding:7px 12px;border:1px solid #74613b;border-radius:8px;background:#252116;color:#f0d99b;font:600 12px system-ui;cursor:pointer}
#panelNotificationDrawer :is(#panelEnablePush,#panelDisablePush){min-height:38px;padding:8px 12px;border:1px solid #74613b;border-radius:8px;background:#252116;color:#f0d99b;cursor:pointer}
#panelNotificationToggle:focus-visible,#panelNotificationClose:focus-visible{outline:2px solid #d3b56d;outline-offset:3px}
@media(max-width:600px){#panelNotificationCenter{top:auto;right:auto}#panelNotificationDrawer{right:12px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 140px)}}

/* Auth cards keep their original width; the bell lives inside the card. */
body.auth #panelNotificationCenter.panel-notification-auth{width:100%;box-sizing:border-box;margin:12px 0 0;justify-content:flex-end}
body.auth #panelNotificationCenter.panel-notification-auth+h1{margin-top:12px!important}
body.auth #panelNotificationCenter.panel-notification-auth #panelNotificationToggle{width:auto;min-width:38px;gap:8px;padding:7px 10px!important}
body.auth #panelNotificationCenter.panel-notification-auth #panelNotificationToggle::after{content:"Notifications";font-size:12px;font-weight:600}