.notifications-page{display:flex;flex-direction:column;gap:1.5rem}.page-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.filter-tabs{display:flex;gap:.5rem}.filter-tab{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#1a1a1a;border:1px solid #2a2a2a;color:#888;border-radius:8px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:Inter,sans-serif}.filter-tab:hover{background-color:#252525;color:#fff;border-color:#333}.filter-tab.active{background-color:#c41e3a;border-color:#c41e3a;color:#fff}.filter-tab.active .tab-count{background-color:#fff3;color:#fff}.tab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.tab-dot.urgent{background-color:#ef4444}.tab-dot.important{background-color:#f59e0b}.tab-dot.routine{background-color:#6b7280}.filter-tab.active .tab-dot{background-color:#fff9}.tab-count{font-size:.6875rem;padding:.125rem .4rem;background-color:#333;border-radius:10px;font-weight:600;min-width:18px;text-align:center}.header-actions{display:flex;gap:.5rem}.header-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:8px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:Inter,sans-serif}.header-btn.secondary{background-color:#1a1a1a;border:1px solid #2a2a2a;color:#ccc}.header-btn.secondary:hover{background-color:#252525;border-color:#444;color:#fff}.btn-icon{width:16px;height:16px;background-color:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center}.check-icon{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E")}.notifications-card{background-color:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden}.notifications-list{min-height:200px}.notification-item{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid #222;cursor:pointer;transition:all .2s ease;position:relative}.notification-item:last-child{border-bottom:none}.notification-item:hover{background-color:#1e1e1e}.notification-item.unread{background-color:#c41e3a0a}.notification-item.unread:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:#c41e3a}.notif-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.notif-icon svg{width:20px;height:20px}.notif-icon.order{background-color:#22c55e1a}.notif-icon.order svg{stroke:#22c55e}.notif-icon.member{background-color:#3b82f61a}.notif-icon.member svg{stroke:#3b82f6}.notif-icon.payment{background-color:#8b5cf61a}.notif-icon.payment svg{stroke:#8b5cf6}.notif-icon.alert{background-color:#ef44441a}.notif-icon.alert svg{stroke:#ef4444}.notif-icon.system{background-color:#6b72801a}.notif-icon.system svg{stroke:#9ca3af}.notif-body{flex:1;min-width:0}.notif-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.375rem}.notif-title-row{display:flex;align-items:center;gap:.5rem;min-width:0}.notif-priority{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .5rem;border-radius:4px;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.notif-priority.urgent{background-color:#ef44441a;color:#ef4444}.notif-priority.important{background-color:#f59e0b1a;color:#f59e0b}.notif-priority.routine{background-color:#6b728014;color:#6b7280}.notif-title{font-size:.9375rem;font-weight:600;color:#eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-item.unread .notif-title{color:#fff}.notif-message{font-size:.8125rem;color:#777;line-height:1.4;margin-bottom:.5rem}.notif-meta{display:flex;align-items:center;gap:1rem}.notif-time{font-size:.75rem;color:#555}.notif-type-label{font-size:.6875rem;color:#555;text-transform:uppercase;letter-spacing:.05em}.notif-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.notif-unread-dot{width:8px;height:8px;border-radius:50%;background-color:#c41e3a;flex-shrink:0}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;gap:1rem}.loading-state p{color:#666;font-size:.875rem}.loading-spinner{width:32px;height:32px;border:3px solid #333;border-top-color:#c41e3a;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{padding:5rem 2rem;text-align:center}.empty-icon{width:72px;height:72px;margin:0 auto 1.5rem;background-color:#1e1e1e;border:1px solid #2a2a2a;border-radius:16px;display:flex;align-items:center;justify-content:center}.empty-icon svg{width:36px;height:36px;stroke:#444}.empty-state h3{margin:0 0 .5rem;font-size:1.125rem;font-weight:600;color:#ccc}.empty-state p{margin:0;color:#666;font-size:.875rem}@media(max-width:768px){.page-header{flex-direction:column;align-items:flex-start}.filter-tabs{flex-wrap:wrap}.notification-item{padding:1rem}.notif-header{flex-direction:column;align-items:flex-start;gap:.25rem}}