.notification-sidebar{width:420px!important;max-width:90vw}.notification-sidebar .offcanvas-body{padding:0!important}.notification-bell-icon{width:40px;height:40px;background:rgba(255,255,255,.25);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.notification-count-badge{position:absolute;top:6px;right:6px;background:#ff3d71;color:#fff;font-size:.75rem;font-weight:600;padding:2px 6px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.2)}.notification-close-btn{background:rgba(255,255,255,.2);border:none;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.notification-close-btn:hover{background:rgba(255,255,255,.3);transform:scale(1.05)}.notification-filters{background:#fff;border-bottom:1px solid rgba(255,193,7,.15);position:-webkit-sticky;position:sticky;top:0;z-index:10}.notification-toggle-wrapper{display:grid;grid-template-columns:1fr 1fr;grid-gap:.5rem;gap:.5rem;background:rgba(255,220,40,.1);padding:.375rem;border-radius:10px}.notification-toggle-btn{background:transparent;border:none;padding:.425rem 1rem;border-radius:8px;font-size:.875rem;font-weight:600;color:#666;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.notification-toggle-btn.active{background:#ffc107;color:#fff;box-shadow:0 2px 8px rgba(255,193,7,.3)}.notification-toggle-btn:hover:not(.active){background:rgba(255,193,7,.15);color:#ffc107}.period-filter-btn{background:transparent!important;border:1px solid rgba(255,193,7,.2)!important;color:#666!important;font-weight:500!important;transition:all .2s ease!important}.period-filter-btn:hover{background:rgba(255,220,40,.1)!important;border-color:#ffc107!important;color:#ffc107!important}.period-filter-btn.active{border-color:#ffc107!important}.mark-all-btn,.period-filter-btn.active{background:rgba(255,220,40,.15)!important;color:#ffc107!important;font-weight:600!important}.mark-all-btn{border:1px solid #ffc107!important;transition:all .2s ease!important}.mark-all-btn:hover{background:#ffc107!important;color:#fff!important;box-shadow:0 2px 8px rgba(255,193,7,.3)!important}.notification-body{background:#f8f9fa;overflow-y:auto;max-height:calc(100vh - 230px)}.notification-list{padding:.875rem;display:flex;flex-direction:column;gap:.75rem}.empty-state{padding:4rem 2rem!important}.empty-state-icon{width:80px;height:80px;margin:0 auto;background:rgba(255,220,40,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#ffc107}.empty-state-title{color:#333;font-weight:600}.empty-state-text{color:#999;font-size:.9rem;margin:0}.notification-spinner .spinner-border{border-color:#ffc107 transparent #ffc107 #ffc107}.all-loaded-text{text-align:center;padding:1.5rem;color:#999;font-size:.85rem}@media (max-width:576px){.notification-sidebar{width:100%!important}.notification-toggle-btn{font-size:.8rem;padding:.5rem .75rem}}