.notifications-page-container{max-width:800px;margin:0 auto;padding:2rem}.notifications-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--lightest-gray-color)}.notifications-header h1{margin:0;color:var(--primary-text-color);font-size:1.75rem;font-weight:600}.notifications-actions{display:flex;gap:.75rem}.notifications-actions .oddsrabbit-btn{display:flex;align-items:center;gap:.5rem}.notifications-filter{margin-bottom:1.5rem}.filter-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.filter-btn{background:0 0;border:1px solid var(--light-gray-color);color:var(--primary-light-text-color);padding:.5rem 1rem;border-radius:1.5rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.filter-btn:hover{background-color:var(--lightest-gray-color);color:var(--primary-text-color)}.filter-btn.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.filter-btn:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.notifications-content{min-height:400px}.notifications-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;gap:1rem;color:var(--primary-light-text-color)}.notifications-loading .loading-spinner{width:32px;height:32px;border:3px solid var(--lightest-gray-color);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.notifications-loading span{font-size:1rem;font-weight:500}.notifications-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--primary-light-text-color)}.notifications-empty.hide{display:none!important}.notifications-empty-icon{font-size:4rem;margin-bottom:1.5rem;opacity:.6}.notifications-empty h3{margin:0 0 .75rem 0;font-weight:600;color:var(--primary-text-color);font-size:1.25rem}.notifications-empty p{margin:0;font-size:1rem;color:var(--primary-light-text-color);max-width:400px}.notifications-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--red-color)}.notifications-error.hide{display:none!important}.notifications-error-icon{font-size:3rem;margin-bottom:1.5rem}.notifications-error h3{margin:0 0 .75rem 0;font-weight:600;font-size:1.25rem}.notifications-error p{margin:0 0 1.5rem 0;font-size:1rem;color:var(--primary-light-text-color);max-width:400px}.notifications-list{display:flex;flex-direction:column;gap:0}.notifications-list.hide{display:none!important}.notification-page-item{position:relative;padding:1.5rem;border-bottom:1px solid var(--lightest-gray-color);cursor:pointer;transition:background-color .2s ease;display:flex;align-items:flex-start;gap:1rem;background-color:var(--main-content-bg-color)}.notification-page-item:hover{background-color:var(--alt-content-bg-color)}.notification-page-item:first-child{border-top-left-radius:.75rem;border-top-right-radius:.75rem}.notification-page-item:last-child{border-bottom:none;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}.notification-page-item.unread{background-color:#f8f9ff;border-left:4px solid var(--primary-color)}.notification-page-item.unread:hover{background-color:#f0f2ff}.notification-page-content{flex:1;min-width:0}.notification-page-title{font-weight:600;color:var(--primary-text-color);line-height:1.4;font-size:1rem;margin-bottom:.375rem}.notification-page-time{color:var(--primary-lightest-text-color);font-size:.75rem;font-weight:500}.notification-page-message{color:var(--primary-light-text-color);margin-bottom:.5rem;line-height:1.45;font-size:.85rem;word-wrap:break-word}.notification-page-type{display:inline-block;background-color:var(--lightest-gray-color);color:var(--primary-light-text-color);padding:.25rem .75rem;border-radius:1rem;font-size:.8rem;font-weight:500}.notification-page-unread-dot{width:10px;height:10px;background-color:var(--primary-color);border-radius:50%;flex-shrink:0;margin-top:.5rem}.notification-page-actions{display:flex;gap:.5rem;flex-shrink:0;opacity:0;transition:opacity .2s ease;align-self:center}.notification-page-item:hover .notification-page-actions{opacity:1}.notification-action-btn{background:0 0;border:none;color:rgba(0,0,0,.3);padding:.375rem;border-radius:.375rem;transition:all .15s ease;flex-shrink:0;margin-top:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer}.notification-action-btn:hover{background-color:rgba(0,0,0,.06);color:rgba(0,0,0,.7);transform:scale(1.05)}.notification-action-btn:focus-visible{outline:2px solid var(--primary-color);outline-offset:0px}.notification-action-btn:active{transform:scale(.95)}.notifications-load-more{text-align:center;padding:2rem 0}.notifications-load-more.hide{display:none!important}@media (max-width:768px){.notifications-page-container{padding:1rem}.notifications-header{flex-direction:column;align-items:flex-start;gap:1rem}.notifications-actions{width:100%;justify-content:flex-end}.filter-buttons{justify-content:flex-start}.notification-page-item{padding:1rem;flex-direction:column;align-items:stretch;gap:.75rem}.notification-page-actions{align-self:flex-end;opacity:1}.notification-page-unread-dot{position:absolute;top:1rem;right:1rem;margin-top:0}}@media (max-width:480px){.notifications-page-container{padding:.75rem}.notifications-header h1{font-size:1.5rem}.filter-btn{padding:.4rem .8rem;font-size:.85rem}.notification-page-item{padding:.75rem}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.filter-btn,.notification-action-btn,.notification-page-item,.notifications-actions .oddsrabbit-btn{transition:none}.loading-spinner{animation:none}}@media (prefers-contrast:high){.notification-page-item{border:1px solid var(--primary-text-color)}.notification-page-item.unread{border-left-width:4px}.filter-btn.active{border-width:2px}}.notification-page-item:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px;background-color:var(--lightest-gray-color)}.notification-page-item:focus .notification-page-actions{opacity:1}