.notif-panel{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.72);backdrop-filter:blur(22px);display:none;opacity:0;transition:opacity .25s ease}.notif-panel.open{opacity:1}.notif-card{width:94vw;max-width:960px;margin:5vh auto;box-shadow:0 40px 90px rgba(0,0,0,.9);border:1px solid rgba(220,20,60,.25);border-radius:22px;overflow:hidden;background:rgba(8,8,8,.9)}.notif-card{transform:scale(.98) translateY(8px);opacity:.96;transition:transform .25s ease,opacity .25s ease}.notif-panel.open .notif-card{transform:scale(1) translateY(0);opacity:1}.notif-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:rgba(12,12,12,.95);border-bottom:1px solid rgba(220,20,60,.22);color:#fff;font-weight:800;letter-spacing:.3px;text-transform:uppercase}.notif-header{position:relative}.notif-header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,rgba(139,0,0,0),rgba(139,0,0,.8),rgba(139,0,0,0))}.notif-back{display:none;background:0 0;border:1px solid rgba(220,20,60,.25);color:#fff;padding:8px 12px;border-radius:10px;display:none;align-items:center;gap:8px}.notif-back svg{width:18px;height:18px}.notif-list{max-height:58vh;overflow-y:auto;background:linear-gradient(180deg,rgba(10,10,10,.9)0,rgba(0,0,0,.98) 100%)}.notif-item{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.05);color:#eaeaea;text-decoration:none;transition:background .2s ease,box-shadow .2s ease}.notif-item:hover{background:rgba(139,0,0,.1);box-shadow:0 8px 18px rgba(0,0,0,.25) inset}.notif-item.unseen{background:rgba(139,0,0,.08)}.notif-item.unseen:after{content:"";width:8px;height:8px;border-radius:50%;background:#dc143c;box-shadow:0 0 0 3px rgba(220,20,60,.25);margin-left:auto;align-self:center}.notif-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(139,0,0,.18);flex-shrink:0}.notif-title{font-weight:800;font-size:1rem;color:#fff;letter-spacing:.2px}.notif-meta{font-size:.8rem;color:#b0b0b0;margin-top:4px;display:flex;gap:10px;align-items:center}.notif-empty{padding:24px;color:#b0b0b0;text-align:center}.notif-actions{display:flex;gap:10px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.06);background:#0a0a0a}.notif-btn{background:#1f1f1f;color:#fff;border:1px solid rgba(220,20,60,.25);padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}.notif-btn:hover{background:#262626}.notif-detail{max-height:34vh;overflow:auto;background:rgba(0,0,0,.85);border-top:1px solid rgba(255,255,255,.06);padding:14px 16px;color:#eaeaea;display:none}.notif-detail-title{font-weight:800;font-size:1rem;margin-bottom:8px}.notif-detail-image{width:100%;border-radius:10px;margin-bottom:10px}.notif-detail-actions{display:flex;gap:10px;margin-top:12px}.notif-list::-webkit-scrollbar,.notif-detail::-webkit-scrollbar{width:10px}.notif-list::-webkit-scrollbar-track,.notif-detail::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:10px}.notif-list::-webkit-scrollbar-thumb,.notif-detail::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#8b0000,#a00000);border-radius:10px;border:2px solid rgba(255,255,255,.1)}.notif-list::-webkit-scrollbar-thumb:hover,.notif-detail::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#a00000,#c00000)}.notif-list{scrollbar-color:#8b0000 rgba(255,255,255,.08);scrollbar-width:thin}.notif-detail{scrollbar-color:#8b0000 rgba(255,255,255,.08);scrollbar-width:thin}.notif-card.detail-mode .notif-list{display:none}.notif-card.detail-mode .notif-detail{display:block;max-height:74vh;font-size:1.02rem;line-height:1.75;padding:18px 20px}.notif-card.detail-mode .notif-detail-title{font-size:1.2rem}.notif-card.detail-mode .notif-back{display:inline-flex}@media (max-width:768px){.notif-card{width:96vw;margin:3vh auto}.notif-card.detail-mode .notif-detail{max-height:76vh}}