.notification-center-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding-top:80px}.notification-center{background:var(--surface-primary);border-radius:12px;width:90%;max-width:480px;max-height:70vh;box-shadow:0 10px 30px #0003;animation:slideDown .3s ease-out;display:flex;flex-direction:column}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.notification-center-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #e5e7eb}.notification-center-header h3{margin:0;font-size:20px;font-weight:600;color:#1f2937}.notification-center-actions{display:flex;align-items:center;gap:12px}.mark-all-read-button{background:none;border:none;color:#3b82f6;font-size:14px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease}.mark-all-read-button:hover{background-color:#eff6ff;color:#2563eb}.close-button{background:none;border:none;font-size:20px;color:#6b7280;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.close-button:hover{background-color:#f3f4f6;color:#374151}.notification-center-filters{display:flex;padding:16px 24px 0;gap:8px;border-bottom:1px solid #f3f4f6}.filter-button{background:none;border:none;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;color:#6b7280}.filter-button:hover{background-color:#f3f4f6;color:#374151}.filter-button.active{background-color:var(--brand-primary-accent);color:#fff}.notification-center-body{flex:1;overflow-y:auto;min-height:200px}.notification-loading,.notification-error,.notification-empty{text-align:center;padding:40px 24px;color:#6b7280;font-size:14px}.notification-error{color:#dc2626}.notification-list{padding:16px 0}.notification-item{display:flex;align-items:flex-start;padding:16px 24px;border-bottom:1px solid #f9fafb;cursor:pointer;transition:all .2s ease;position:relative}.notification-item:hover{background-color:#f9fafb}.notification-item.unread{background-color:#eff6ff;border-left:4px solid #3b82f6}.notification-item.unread:hover{background-color:#dbeafe}.notification-icon{font-size:20px;margin-right:12px;margin-top:2px;flex-shrink:0}.notification-content{flex:1;min-width:0}.notification-title{font-size:14px;font-weight:600;color:#1f2937;margin-bottom:4px;display:flex;align-items:center;gap:8px}.unread-dot{width:6px;height:6px;background-color:#3b82f6;border-radius:50%;flex-shrink:0}.notification-message{font-size:13px;color:#6b7280;line-height:1.4;margin-bottom:6px}.notification-time{font-size:12px;color:#9ca3af}.notification-bell{position:relative;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.notification-bell:hover{background-color:#f3f4f6}.bell-icon{font-size:20px;color:#6b7280}.notification-badge{position:absolute;top:2px;right:2px;background-color:#dc2626;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;line-height:1}@media (max-width: 768px){.notification-center-overlay{padding-top:60px}.notification-center{width:95%;max-height:80vh;margin:0 10px}.notification-center-header{padding:16px 20px 12px}.notification-center-header h3{font-size:18px}.notification-center-filters{padding:12px 20px 0}.notification-item{padding:12px 20px}.notification-icon{font-size:18px;margin-right:10px}.notification-title{font-size:13px}.notification-message{font-size:12px}.notification-time{font-size:11px}}.notification-center-body::-webkit-scrollbar{width:6px}.notification-center-body::-webkit-scrollbar-track{background:#f1f5f9}.notification-center-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.notification-center-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}