/* Account notification centre. */
.account-profile-summary .account-notifications-toggle { position:absolute; z-index:4; top:8px; right:65px; display:grid; width:22px; height:22px; place-items:center; padding:0; border:1px solid rgba(53,141,169,.38); border-radius:7px; background:rgba(238,251,254,.84); box-shadow:0 2px 5px rgba(21,93,115,.1); color:#2b7188; cursor:pointer; line-height:1; transition:background .16s ease,box-shadow .16s ease,transform .16s ease; }
.account-profile-summary .account-notifications-toggle:hover { background:#fff; box-shadow:0 4px 8px rgba(19,101,125,.16); transform:translateY(-1px); }
.account-notifications-toggle > i { color:#dc9426; font-size:10px; }.account-notifications-toggle > b { position:absolute; top:-5px; right:-6px; display:grid; min-width:15px; height:15px; place-items:center; padding:0 3px; border:1px solid rgba(255,255,255,.8); border-radius:999px; background:linear-gradient(145deg,#ee6960,#bd3e45); box-shadow:0 2px 5px rgba(150,42,47,.3); color:#fff; font-family:Arial,sans-serif; font-size:9px; font-weight:bold; line-height:1; }
.account-notifications-modal[hidden] { display:none; }.account-notifications-modal { position:fixed; z-index:10050; inset:0; display:grid; place-items:center; padding:18px; }.account-notifications-modal__backdrop { position:absolute; inset:0; background:rgba(9,37,49,.48); backdrop-filter:blur(2px); }.account-notifications-modal__panel { position:relative; z-index:1; width:min(100%,470px); overflow:hidden; border:1px solid rgba(63,156,183,.72); border-radius:13px; background:linear-gradient(145deg,#fbfeff,#dff1f5); box-shadow:0 18px 45px rgba(2,29,40,.35),inset 0 1px rgba(255,255,255,.9); animation:account-notifications-rise .2s ease both; }.account-notifications-modal__panel > header { display:flex; min-height:64px; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid rgba(47,136,163,.3); background:linear-gradient(120deg,#17768d,#2da6bd 62%,#54c6d0); }.account-notifications-modal__panel > header span { display:block; color:#bff9ed; font-family:'Bebas Neue Bold',sans-serif; font-size:10px; letter-spacing:.8px; line-height:1; text-transform:uppercase; }.account-notifications-modal__panel h2 { margin:3px 0 0; color:#fff; font-family:'Bebas Neue Bold',sans-serif; font-size:25px; font-weight:normal; line-height:1; text-transform:uppercase; }.account-notifications-modal__panel > header button { display:grid; width:29px; height:29px; place-items:center; border:1px solid rgba(234,255,255,.58); border-radius:8px; background:rgba(4,65,81,.21); color:#fff; cursor:pointer; transition:background .16s ease,transform .16s ease; }.account-notifications-modal__panel > header button:hover { background:rgba(4,65,81,.38); transform:rotate(90deg); }
.account-notifications-modal__list { display:grid; gap:7px; max-height:min(58vh,430px); padding:10px; overflow:auto; }.account-notification { position:relative; display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:9px; align-items:start; padding:9px; border:1px solid rgba(99,165,184,.25); border-radius:8px; background:rgba(255,255,255,.78); color:inherit; text-decoration:none!important; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }.account-notification.is-unread { border-color:rgba(43,157,187,.64); background:linear-gradient(105deg,#faffff,#e5f7fa); box-shadow:0 3px 7px rgba(28,111,134,.08); }.account-notification[href]:hover { border-color:#48b7cc; box-shadow:0 5px 10px rgba(22,112,139,.14); color:inherit; transform:translateX(2px); }.account-notification > i { display:grid; width:30px; height:30px; place-items:center; border-radius:9px; background:#e0f4f7; color:#278ca4; font-size:14px; }.account-notification:nth-child(2n) > i { background:#fff1c8; color:#cf8b21; }.account-notification:nth-child(3n) > i { background:#e8f6e9; color:#319768; }.account-notification strong { display:block; color:#1c637b; font-family:'Bebas Neue Bold',sans-serif; font-size:16px; font-weight:normal; line-height:1.05; text-transform:uppercase; }.account-notification p { margin:3px 0 4px; color:#5e7f8b; font-size:11px; line-height:1.32; }.account-notification time { display:block; color:#8aa3aa; font-family:'Bebas Neue Bold',sans-serif; font-size:9px; letter-spacing:.25px; text-transform:uppercase; }.account-notification__arrow { align-self:center; color:#d39429; font-size:12px; }.account-notifications-modal__empty { display:grid; min-height:150px; place-items:center; align-content:center; gap:5px; padding:20px; color:#6e929d; text-align:center; }.account-notifications-modal__empty > i { color:#d59628; font-size:27px; }.account-notifications-modal__empty strong { color:#23718a; font-family:'Bebas Neue Bold',sans-serif; font-size:21px; font-weight:normal; text-transform:uppercase; }.account-notifications-modal__empty span { font-size:11px; }@keyframes account-notifications-rise { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }@media (max-width:420px) { .account-profile-summary .account-notifications-toggle { top:29px; }.account-notifications-toggle > span { display:none; }.account-notifications-modal { padding:10px; } }
