.notif-card{display:flex;align-items:flex-start;gap:14px;background:var(--white);border-radius:18px;padding:18px;margin-bottom:10px;border:1px solid var(--border);cursor:pointer;transition:all .2s;animation:notifSlide .4s ease both}.notif-card.unread{border-left:3px solid var(--amber)}.notif-card:hover{background:var(--cream);transform:translateX(3px)}.notif-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.notif-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px}.notif-desc{font-size:12px;color:var(--text2);line-height:1.5}.notif-time{font-size:11px;color:var(--text3);margin-top:5px}@keyframes notifPopIn{0%{opacity:0;transform:scale(.94) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes notifOverlayIn{0%{opacity:0}to{opacity:1}}.notif-pop-overlay{position:fixed;inset:0;z-index:198;background:rgba(30,24,44,.28);backdrop-filter:blur(2px);animation:notifOverlayIn .2s ease}.notif-pop{position:fixed;z-index:201;width:440px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100dvh - 90px));display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--border);border-radius:18px;box-shadow:0 20px 50px -12px rgba(45,42,38,.32),0 8px 20px -8px rgba(45,42,38,.16);overflow:hidden;transform-origin:top right;animation:notifPopIn .26s cubic-bezier(.22,1,.36,1);font-family:Poppins,sans-serif}.notif-pop:before{content:"";position:absolute;top:-7px;right:22px;width:14px;height:14px;background:var(--white);border-left:1.5px solid var(--border);border-top:1.5px solid var(--border);transform:rotate(45deg)}.notif-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 10px;flex-shrink:0}.notif-pop-head-l{display:flex;align-items:center;gap:8px}.notif-pop-title{font-size:15px;font-weight:700;color:var(--text)}.notif-pop-badge{font-size:10px;font-weight:700;color:#C48A1A;background:var(--amber-soft);border-radius:20px;padding:2px 8px}.notif-pop-markall{display:inline-flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font-family:Poppins,sans-serif;font-size:12px;font-weight:600;color:var(--text2);transition:color .15s}.notif-pop-markall:hover{color:var(--text)}.notif-pop-body{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin}.notif-pop-body::-webkit-scrollbar{width:6px}.notif-pop-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}.notif-pop-card{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:transparent;border:none;border-radius:12px;padding:12px;cursor:pointer;transition:background .15s;animation:notifSlide .35s ease both;font-family:Poppins,sans-serif}.notif-pop-card:hover{background:var(--cream)}.notif-pop-card.unread{background:rgba(232,163,46,.06)}.notif-pop-card.unread:hover{background:rgba(232,163,46,.1)}.notif-pop-card-body{flex:1;min-width:0}.notif-pop-dot{position:absolute;top:14px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--amber);flex-shrink:0}.notif-pop-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 20px;color:var(--text2);font-size:13px}@media(max-width:480px){.notif-pop{width:auto;left:12px;right:12px!important;max-width:none}.notif-pop:before{display:none}}