.notif-trigger{cursor:pointer;background:#ffffff0a;border:1px solid #ffffff12;border-radius:10px;align-items:center;gap:10px;margin-bottom:8px;padding:10px 12px;transition:all .2s;display:flex;position:relative}.notif-trigger:hover{background:#00b8db1a;border-color:#00b8db33}.notif-trigger.active{background:#00b8db1f;border-color:#00b8db40}.notif-trigger.collapsed{justify-content:center;padding:10px}.notif-bell-icon{flex-shrink:0;font-size:20px;line-height:1}.notif-label{color:#cbd5e0;white-space:nowrap;flex:1;font-size:13px;font-weight:600}.notif-badge{color:#fff;background:#ef4444;border-radius:99px;flex-shrink:0;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-size:11px;font-weight:700;animation:2s infinite notif-pulse;display:flex}.notif-badge-collapsed{color:#fff;background:#ef4444;border-radius:99px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 3px;font-size:9px;font-weight:700;animation:2s infinite notif-pulse;display:flex;position:absolute;top:4px;right:4px}@keyframes notif-pulse{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 4px #ef444400}}.notif-panel{z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-direction:column;width:360px;max-height:480px;animation:.2s cubic-bezier(.16,1,.3,1) notif-panel-in;display:flex;position:absolute;bottom:calc(100% + 8px);left:0;overflow:hidden;box-shadow:0 -12px 40px #00000026,0 4px 16px #00000014}.notif-panel.from-collapsed{bottom:0;left:calc(100% + 12px)}@keyframes notif-panel-in{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.notif-panel-header{background:linear-gradient(135deg,#f8fafc 0%,#f0f9ff 100%);border-bottom:1px solid #f1f5f9;flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.notif-panel-title{align-items:center;gap:8px;display:flex}.notif-panel-title h3{color:#111827;margin:0;font-size:15px;font-weight:700}.notif-panel-new-badge{color:#fff;background:#ef4444;border-radius:99px;padding:2px 8px;font-size:10px;font-weight:700}.notif-mark-all-btn{color:#6366f1;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:12px;font-weight:600;transition:all .15s}.notif-mark-all-btn:hover{color:#4f46e5;background:#eef2ff}.notif-panel-body{scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent;flex:1;overflow-y:auto}.notif-panel-body::-webkit-scrollbar{width:4px}.notif-panel-body::-webkit-scrollbar-track{background:0 0}.notif-panel-body::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}.notif-empty{text-align:center;color:#9ca3af;padding:48px 20px}.notif-empty-icon{filter:grayscale(.3);margin-bottom:12px;font-size:36px;display:block}.notif-empty p{margin:0;font-size:13px;font-weight:500}.notif-item{cursor:pointer;border-bottom:1px solid #f8fafc;align-items:flex-start;gap:12px;padding:12px 16px;transition:all .15s;display:flex;position:relative}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:#f8fafc}.notif-item.unread{background:var(--notif-bg)}.notif-item.unread:before{content:"";background:var(--notif-color);border-radius:0 2px 2px 0;width:3px;position:absolute;top:0;bottom:0;left:0}.notif-item.read{cursor:default;background:#fff}.notif-item-icon{background:var(--notif-bg);border:1px solid var(--notif-border);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;margin-top:1px;font-size:16px;display:flex}.notif-item-content{flex:1;min-width:0}.notif-item-title{color:#111827;margin:0 0 3px;font-size:13px;font-weight:700;line-height:1.4}.notif-item.read .notif-item-title{color:#374151;font-weight:500}.notif-item-message{color:#6b7280;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 5px;font-size:11.5px;line-height:1.5;display:-webkit-box;overflow:hidden}.notif-item-time{color:#9ca3af;font-size:10px;font-weight:500}.notif-item-dot{background:var(--notif-color);border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:6px}.notif-type-error{--notif-color:#ef4444;--notif-bg:#fef2f2;--notif-border:#fecaca}.notif-type-warning{--notif-color:#f59e0b;--notif-bg:#fffbeb;--notif-border:#fde68a}.notif-type-success{--notif-color:#22c55e;--notif-bg:#f0fdf4;--notif-border:#bbf7d0}.notif-type-info{--notif-color:#3b82f6;--notif-bg:#eff6ff;--notif-border:#bfdbfe}.dashboard-notif-item{border:1px solid var(--notif-border);background:var(--notif-bg);border-radius:12px;align-items:flex-start;gap:12px;margin-bottom:10px;padding:14px 16px;transition:all .2s;display:flex;position:relative;overflow:hidden}.dashboard-notif-item:before{content:"";background:var(--notif-color);width:4px;position:absolute;top:0;bottom:0;left:0}.dashboard-notif-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000014}.dashboard-notif-icon{border:1px solid var(--notif-border);background:#fff;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:18px;display:flex}.dashboard-notif-content{flex:1;min-width:0}.dashboard-notif-title{color:#111827;margin:0 0 3px;font-size:13px;font-weight:700}.dashboard-notif-desc{color:#6b7280;margin:0;font-size:12px;line-height:1.5}.dashboard-notif-time{color:#9ca3af;white-space:nowrap;flex-shrink:0;margin-top:2px;font-size:11px}.dashboard-notif-empty{text-align:center;color:#9ca3af;padding:32px 16px;font-size:13px}