.notification-wrapper{position:relative}.notification-badge{position:absolute;top:-8px;right:-8px;background:#ef4444;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003}.notification-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:380px;max-width:calc(100vw - 32px);background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026;z-index:1000;overflow:hidden;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-dropdown__header{padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;background:#f9fafb}.notification-dropdown__header h3{font-size:16px;font-weight:700;color:#1f2937;margin:0}.mark-all-read-btn{background:none;border:none;color:#3b82f6;font-size:13px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .2s}.mark-all-read-btn:hover{background:#eff6ff}.notification-dropdown__body{max-height:400px;overflow-y:auto}.notification-dropdown__body::-webkit-scrollbar{width:6px}.notification-dropdown__body::-webkit-scrollbar-track{background:#f3f4f6}.notification-dropdown__body::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.notification-dropdown__body::-webkit-scrollbar-thumb:hover{background:#9ca3af}.notification-item{padding:14px 20px;border-bottom:1px solid #f3f4f6;cursor:pointer;transition:background .2s;display:flex;gap:12px;align-items:start;position:relative}.notification-item:hover{background:#f9fafb}.notification-item:last-child{border-bottom:none}.notification-item.unread{background:#eff6ff}.notification-item.unread:hover{background:#dbeafe}.notification-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:16px}.notification-icon .text-red{color:#ef4444}.notification-icon .text-yellow{color:#f59e0b}.notification-icon .text-blue{color:#3b82f6}.notification-content{flex:1;min-width:0}.notification-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 4px;line-height:1.4}.notification-message{font-size:13px;color:#6b7280;margin:0 0 6px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-time{font-size:11px;color:#9ca3af;font-weight:500}.notification-dot{position:absolute;top:20px;right:16px;width:8px;height:8px;background:#3b82f6;border-radius:50%}.notification-dropdown__footer{padding:12px 20px;border-top:1px solid #e5e7eb;text-align:center;background:#f9fafb}.notification-dropdown__footer a{color:#3b82f6;font-size:13px;font-weight:600;text-decoration:none;display:inline-block;padding:4px 8px;border-radius:6px;transition:all .2s}.notification-dropdown__footer a:hover{background:#eff6ff}.notification-empty,.notification-loading,.notification-error{padding:48px 20px;text-align:center;color:#9ca3af}.notification-empty i,.notification-loading i,.notification-error i{font-size:48px;margin-bottom:12px;display:block;color:#d1d5db}.notification-loading i{color:#3b82f6}.notification-error i{color:#ef4444}.notification-empty p,.notification-loading p,.notification-error p{margin:0 0 12px;font-size:14px;color:#6b7280}.notification-error button{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.notification-error button:hover{background:#2563eb}@media (max-width: 480px){.notification-dropdown{width:calc(100vw - 32px);left:50%;right:auto;transform:translate(-50%)}.notification-dropdown__header h3{font-size:14px}.mark-all-read-btn{font-size:12px}}