/* Account notification tray. */
#notificationPanel{width:min(400px,calc(100vw - 24px));border:1px solid #333741;border-radius:18px;background:#111419;box-shadow:0 24px 70px #0009;max-height:min(620px,calc(100dvh - 100px))}
#notificationPanel .notification-head{padding:18px 18px 14px;background:linear-gradient(125deg,#23262b,#191c21);border-bottom:1px solid #30343c}
#notificationPanel .notification-head h3{font-size:18px;letter-spacing:-.35px;color:#f5f6f8}
#notificationPanel .notification-head>button{width:32px;height:32px;border-radius:10px;background:#ffffff06;border:1px solid #ffffff12;color:#a0a6b0;transition:background .15s,color .15s}
#notificationPanel .notification-head>button:hover{background:#ffffff12;color:#fff}
#notificationPanel .notification-actions{padding:8px 16px;min-height:46px;background:#171a20;border-bottom:1px solid #292e37;gap:10px}
#notificationPanel .notification-actions>span{color:#a5adbb;font-size:11px;font-weight:600}
#notificationPanel .notification-actions>button{border:1px solid #ffdc001f;background:#ffdc0009;border-radius:8px;padding:7px 10px;color:#e9ce55;font-size:11px;font-weight:600}
#notificationPanel .notification-actions>button:hover{background:#ffdc0015}
#notificationPanel .notification-list{padding:10px;min-height:180px;overscroll-behavior:contain;scrollbar-color:#3a404b transparent;scrollbar-width:thin}
#notificationPanel #notificationList .notification-item{grid-template-columns:36px minmax(0,1fr) 24px;gap:10px;padding:14px 11px;margin:0 0 8px;border:1px solid #2b3039;border-radius:12px;background:#1a1e25;transition:border-color .15s,background .15s}
#notificationPanel #notificationList .notification-item:last-child{margin-bottom:0}
#notificationPanel #notificationList .notification-item.unread{border-color:#ffdc0024;background:linear-gradient(120deg,#24241e,#1a1e25 65%)}
#notificationPanel #notificationList .notification-item.unread::before{display:none}
#notificationPanel #notificationList .notification-item:hover{background:#222730;border-color:#4a505b}
#notificationPanel .notification-symbol{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;border:1px solid #ffffff10;background:#ffffff05;color:#b2bccd;margin-top:2px}
#notificationPanel .notification-symbol svg{width:20px;height:20px}
#notificationPanel .notification-symbol-withdraw{color:#ebcf61;background:#ffdc0009;border-color:#ffdc0017}
#notificationPanel .notification-symbol-purchase{color:#bca2ef;background:#a987ff0c;border-color:#a987ff1a}
#notificationPanel .notification-symbol-deposit{color:#83d6ae;background:#71dca60b;border-color:#71dca61a}
#notificationPanel #notificationList .notification-item time{display:flex;align-items:center;gap:7px;color:#8a93a3;font-size:10px;font-weight:500}
#notificationPanel .notification-new-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#f6d247;box-shadow:0 0 8px #f6d24730}
#notificationPanel #notificationList .notification-item b{margin-top:6px;color:#f0f2f6;font-size:13px;font-weight:700;line-height:1.4}
#notificationPanel #notificationList .notification-item p{margin:5px 0 0;color:#a5aebb;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
#notificationPanel #notificationList .notification-item>button{opacity:1;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;color:#79818e;font-size:11px;transition:background .15s,color .15s}
#notificationPanel #notificationList .notification-item>button:hover{color:#f1b0a8;background:#ef8b7c12}
#notificationPanel button:focus-visible{outline:2px solid #ffdc00;outline-offset:3px}
#notificationPanel .notification-empty{min-height:240px}
@media(max-width:720px){.top #notificationPanel{position:fixed;top:126px;right:12px;left:12px;width:auto;max-height:calc(100dvh - 150px)}#notificationPanel .notification-head>button{width:36px;height:36px;min-width:36px;min-height:36px}#notificationPanel .notification-actions>button{min-height:36px}#notificationPanel #notificationList .notification-item{grid-template-columns:32px minmax(0,1fr) 28px;gap:8px;padding:12px 9px}#notificationPanel .notification-symbol{width:32px;height:32px;border-radius:9px}#notificationPanel #notificationList .notification-item>button{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){#notificationPanel,#notificationPanel *{animation:none!important;transition:none!important}}
