.notification-trigger{position:relative;display:grid;place-items:center;width:36px;height:36px;color:#c9bf9d;border-radius:10px}.notification-trigger:hover,.notification-trigger[aria-expanded=true]{background:#d6c28c16}.notification-trigger svg{width:20px;height:20px}.notification-count{position:absolute;right:-7px;top:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#dfc987;color:#24271f;font:600 10px/17px var(--sans);box-shadow:0 0 12px #d9bd6d33}
.notification-panel{position:fixed;z-index:45;right:24px;top:78px;width:min(410px,calc(100vw - 24px));max-height:calc(100dvh - 100px);display:flex;flex-direction:column;background:linear-gradient(150deg,#202a2e,#111a1f);border:1px solid #c8bb8c36;border-radius:18px;box-shadow:0 24px 80px #0008;color:#e5e4d9;overflow:hidden;animation:notice-arrive .22s ease-out}.notification-panel[hidden],.message-alert[hidden]{display:none}.notification-panel header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 14px}.notification-panel header small{font-size:11px;color:#9ba89e}.notification-panel h2{font-size:19px;font-weight:500;margin:3px 0 0}.notification-panel h2 span{font-size:12px;color:#ddc989;margin-left:7px}.notification-panel header>button{font-size:25px;width:32px;height:32px;color:#a5b2ab}.notification-panel nav{display:flex;justify-content:space-between;padding:0 22px 14px;border-bottom:1px solid #ffffff0e}.notification-panel nav button{font-size:12px;color:#cdbb89;padding:6px 0}.notification-list{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;min-height:100px}.notification-item{display:block;position:relative;width:100%;padding:17px 22px;text-align:left;border-bottom:1px solid #ffffff0b;color:#bdc6bf}.notification-item:hover{background:#ffffff06}.notification-item.is-unread{background:#d9bf7f07}.notification-item.is-unread:before{content:'';position:absolute;left:9px;top:25px;width:5px;height:5px;border-radius:50%;background:#e5cd8b}.notification-sender{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#e1e1d6}.notification-sender time{font-size:10px;color:#88988f}.notification-item strong{display:block;font-size:13px;font-weight:500;line-height:1.65;margin:8px 0 4px;color:#dedbd0}.notification-item p{font-size:12px;line-height:1.7;color:#a5b2a9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-item small{display:flex;justify-content:space-between;font-size:10px;margin-top:9px;color:#8c9a93}.notification-item small span{color:#c7b98b}.notification-panel footer{padding:10px 22px;font-size:10px;color:#87958e;border-top:1px solid #ffffff0e}.notification-empty{text-align:center;padding:40px 20px;color:#cbbd91}.notification-empty h3{font-size:14px;font-weight:400;margin:10px 0}.notification-empty p{font-size:12px;color:#909f96}.notification-error{font-size:12px;padding:8px 22px;color:#d6ad8d}
.message-alert{position:fixed;right:24px;bottom:26px;z-index:50;display:flex;gap:10px;width:min(370px,calc(100vw - 24px));padding:15px 16px;background:#1c282cf5;border:1px solid #d8c38b5c;border-radius:14px;box-shadow:0 12px 50px #0007;animation:notice-arrive .25s ease-out;color:#e2e3d9}.message-alert-open{flex:1;min-width:0;text-align:left;padding:0}.message-alert-open small{display:block;font-size:11px;color:#d6c48c}.message-alert-open strong{display:block;font-weight:500;font-size:13px;margin:6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-alert-open span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:#a7b6ad}.message-alert-close{align-self:start;color:#a4b1a9;font-size:20px;padding:0 3px}@keyframes notice-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:760px){.notification-panel{top:68px;right:12px;max-height:calc(100dvh - 88px)}.message-alert{right:12px;bottom:20px}.notification-trigger{width:30px;height:34px}}@media(prefers-reduced-motion:reduce){.notification-panel,.message-alert{animation:none}}