.notification-bell{position:relative;display:inline-block}.notification-bell__button{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:var(--space-0);background:transparent;border:none;border-radius:var(--rounded-md);color:var(--color-gray-600);cursor:pointer;transition:var(--transition-fast,all .15s ease)}.notification-bell__button:hover{background-color:var(--color-gray-100);color:var(--color-primary-600);transform:scale(1.05)}.notification-bell__button:active{transform:scale(.95)}.notification-bell__button:focus{outline:none;box-shadow:0 0 0 2px var(--color-primary-500);border-radius:var(--rounded-md)}.notification-bell__button--active{background-color:var(--color-primary-50);color:var(--color-primary-600)}.notification-bell__button--animate{animation:bellRing .6s ease-in-out}.notification-bell__button:disabled{opacity:.6;cursor:not-allowed}.notification-bell__button:disabled:hover{transform:none;background:transparent;color:var(--color-gray-600)}.notification-bell__icon{width:20px;height:20px;transition:var(--transition-fast,all .15s ease)}.notification-bell__badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;background-color:var(--color-error-primary);color:var(--color-white);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);line-height:var(--leading-none);border-radius:var(--rounded-full);padding:var(--space-1) var(--space-2);animation:badgePulse 2s infinite;box-shadow:0 1px 3px rgba(0,0,0,.12);z-index:10}.notification-bell__loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5}.notification-bell__spinner{width:16px;height:16px;border-top:2px solid var(--color-gray-200);border:2px solid var(--color-gray-200);border-top-color:var(--color-primary-500);border-radius:var(--rounded-full);animation:spin 1s linear infinite}@keyframes bellRing{0%,to{transform:rotate(0deg)}10%,30%,50%,70%,90%{transform:rotate(-10deg) scale(1.1)}20%,40%,60%,80%{transform:rotate(10deg) scale(1.1)}}@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.5}to{transform:scale(1);opacity:1}}[data-theme=dark] .notification-bell__button{color:var(--color-gray-400)}[data-theme=dark] .notification-bell__button:hover{background-color:var(--color-gray-800);color:var(--color-primary-400)}[data-theme=dark] .notification-bell__button--active{background-color:var(--color-primary-900);color:var(--color-primary-300)}[data-theme=dark] .notification-bell__spinner{border-color:var(--color-gray-600);border-top-color:var(--color-primary-400)}@media(prefers-contrast:high){.notification-bell__button{border:1px solid var(--color-gray-400)}.notification-bell__button:hover{border-color:var(--color-primary-600)}.notification-bell__button:focus{box-shadow:0 0 0 3px var(--color-primary-500)}.notification-bell__badge{border:1px solid var(--color-white)}}@media(prefers-reduced-motion:reduce){.notification-bell__button--animate{animation:none}.notification-bell__button:active,.notification-bell__button:hover{transform:none}.notification-bell__badge{animation:none}.notification-bell__spinner{animation:none;border:2px solid var(--color-primary-500);border-radius:0}}@media(max-width:768px){.notification-bell__button{width:44px;height:44px}.notification-bell__icon{width:22px;height:22px}.notification-bell__badge{min-width:20px;height:20px;font-size:var(--text-xs);top:-3px;right:-3px}}@media(hover:none)and (pointer:coarse){.notification-bell__button{width:44px;height:44px}.notification-bell__button:hover{transform:none;background:transparent;color:var(--color-gray-600)}.notification-bell__button:active{background-color:var(--color-gray-100);transform:scale(.95)}}.notification-container{position:relative;display:inline-block;z-index:1000;isolation:isolate}@media(max-width:768px){.notification-container{position:static}}.notification-dropdown{position:absolute;top:calc(100% + var(--space-2));right:0;z-index:1000;width:400px;max-width:90vw;background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--rounded-lg);box-shadow:var(--shadow-lg);animation:dropdownSlideIn .2s ease-out}.notification-dropdown__container{display:flex;flex-direction:column;max-height:600px;overflow:hidden}.notification-dropdown__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-gray-200);background:var(--color-gray-50);border-radius:var(--rounded-lg) var(--rounded-lg) 0 0}.notification-dropdown__title{font-size:var(--text-lg);font-weight:var(--font-weight-semibold);color:var(--color-gray-900);margin:0;display:flex;align-items:center;gap:var(--space-2)}.notification-dropdown__count{font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-white);background:var(--color-primary-600);padding:var(--space-1) var(--space-2);border-radius:var(--rounded-sm);min-width:20px;text-align:center}.notification-dropdown__actions{display:flex;align-items:center;gap:var(--space-2)}.notification-dropdown__filters{display:flex;align-items:center;padding:0 var(--space-5);border-bottom:1px solid var(--color-gray-200);background:var(--color-white)}.notification-dropdown__filter{flex:1 1;padding:var(--space-3) var(--space-4);background:transparent;border:none;border-bottom:2px solid transparent;font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-600);cursor:pointer;transition:var(--transition-base,all .2s ease);text-align:center;position:relative}.notification-dropdown__filter--active,.notification-dropdown__filter:hover{color:var(--color-primary-600);background:var(--color-primary-50)}.notification-dropdown__filter--active{border-bottom-color:var(--color-primary-600)}.notification-dropdown__filter-count{position:absolute;top:var(--space-1);right:var(--space-1);background:var(--color-primary-600);color:var(--color-white);font-size:var(--text-xs);font-weight:var(--font-weight-bold);padding:2px 6px;border-radius:var(--rounded-sm);min-width:16px;text-align:center}.notification-dropdown__content{flex:1 1;overflow:hidden;display:flex;flex-direction:column;position:relative}.notification-dropdown__loading{gap:var(--space-3);color:var(--color-gray-600);font-size:var(--text-sm)}.notification-dropdown__error,.notification-dropdown__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8) var(--space-6)}.notification-dropdown__error{gap:var(--space-4);color:var(--color-error-primary)}.notification-dropdown__error svg{opacity:.6}.notification-dropdown__error div{text-align:center}.notification-dropdown__error div p{font-size:var(--text-sm);font-weight:var(--font-weight-medium);margin:0 0 var(--space-2)}.notification-dropdown__retry-btn{padding:var(--space-2) var(--space-4);background:var(--color-error-primary);border:none;border-radius:var(--rounded-md);color:var(--color-white);font-size:var(--text-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:var(--transition-base)}.notification-dropdown__retry-btn:hover{background:var(--color-error-dark)}.notification-dropdown__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-6);text-align:center;color:var(--color-gray-500)}.notification-dropdown__empty svg{margin-bottom:var(--space-4);color:var(--color-gray-300)}.notification-dropdown__empty h4{font-size:var(--text-lg);font-weight:var(--font-weight-medium);color:var(--color-gray-700);margin:0 0 var(--space-2)}.notification-dropdown__empty p{font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:0;max-width:280px}.notification-dropdown__list{flex:1 1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-gray-300) transparent;max-height:400px}.notification-dropdown__list::-webkit-scrollbar{width:6px}.notification-dropdown__list::-webkit-scrollbar-track{background:transparent}.notification-dropdown__list::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:var(--rounded-sm)}.notification-dropdown__list::-webkit-scrollbar-thumb:hover{background:var(--color-gray-400)}.notification-dropdown__scroll-top{position:absolute;top:var(--space-3);right:var(--space-3);z-index:10;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--color-white);border:1px solid var(--color-gray-300);border-radius:50%;color:var(--color-gray-600);cursor:pointer;transition:var(--transition-base);box-shadow:var(--shadow-sm)}.notification-dropdown__scroll-top:hover{background:var(--color-gray-50);border-color:var(--color-gray-400);color:var(--color-gray-700);transform:translateY(-1px);box-shadow:var(--shadow-md)}.notification-dropdown__scroll-top:active{transform:translateY(0)}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}[data-theme=dark] .notification-dropdown{background:var(--color-gray-800);border-color:var(--color-gray-600)}[data-theme=dark] .notification-dropdown__header{background:var(--color-gray-900);border-bottom-color:var(--color-gray-600)}[data-theme=dark] .notification-dropdown__title{color:var(--color-gray-100)}[data-theme=dark] .notification-dropdown__count{background:var(--color-primary-900);color:var(--color-primary-200)}[data-theme=dark] .notification-dropdown__filters{border-bottom-color:var(--color-gray-600);background:var(--color-gray-800)}[data-theme=dark] .notification-dropdown__filter{color:var(--color-gray-400)}[data-theme=dark] .notification-dropdown__filter--active,[data-theme=dark] .notification-dropdown__filter:hover{color:var(--color-primary-300);background:var(--color-primary-900)}[data-theme=dark] .notification-dropdown__filter--active{border-bottom-color:var(--color-primary-400)}[data-theme=dark] .notification-dropdown__empty{color:var(--color-gray-400)}[data-theme=dark] .notification-dropdown__empty h4{color:var(--color-gray-300)}[data-theme=dark] .notification-dropdown__empty svg{color:var(--color-gray-600)}@media(max-width:768px){.notification-dropdown{width:100vw;max-width:100vw;right:-20px;left:-20px;border-radius:var(--rounded-lg) var(--rounded-lg) 0 0}.notification-dropdown__container{max-height:70vh}.notification-dropdown__filters,.notification-dropdown__header{padding-left:var(--space-4);padding-right:var(--space-4)}}@media(prefers-reduced-motion:reduce){.notification-dropdown{animation:none}}.notification-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-gray-100);transition:var(--transition-base,all .2s ease);position:relative;margin:0 var(--space-2)}.notification-item:last-child{border-bottom:none}.notification-item:hover{background:var(--color-gray-50);transform:translateX(2px);box-shadow:0 2px 8px rgba(0,0,0,.05)}.notification-item--clickable{cursor:pointer}.notification-item--unread{background:var(--color-primary-50);border-radius:var(--rounded-md);margin:var(--space-1) var(--space-2)}.notification-item--unread:hover{background:var(--color-primary-100);transform:translateX(2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}.notification-item--unread .notification-item__unread-indicator{display:block}.notification-item__unread-indicator{position:absolute;top:var(--space-4);left:var(--space-2);width:8px;height:8px;background:var(--color-primary-600);border-radius:var(--rounded-full);display:none}.notification-item__icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--rounded-lg);flex-shrink:0;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:var(--transition-base,all .2s ease)}.notification-item__icon-wrapper:hover{transform:scale(1.05);box-shadow:0 4px 8px rgba(0,0,0,.15)}.notification-item__icon{font-size:var(--text-lg)}.notification-item__content{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}.notification-item__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.notification-item__meta{display:flex;align-items:center;gap:var(--space-2);flex:1 1;min-width:0}.notification-item__type{font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--color-gray-600);text-transform:uppercase;letter-spacing:.5px;background:var(--color-gray-100);padding:var(--space-1) var(--space-2);border-radius:var(--rounded-md);white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:var(--transition-base,all .2s ease)}.notification-item__type:hover{background:var(--color-gray-200);transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.15)}.notification-item__time{font-size:var(--text-xs);color:var(--color-gray-500);white-space:nowrap}.notification-item__mark-read{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:1px solid var(--color-gray-300);border-radius:var(--rounded-md);color:var(--color-gray-500);cursor:pointer;transition:var(--transition-base,all .2s ease);flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.1)}.notification-item__mark-read:hover{background:var(--color-success-light);border-color:var(--color-success-primary);color:var(--color-success-primary);transform:scale(1.1);box-shadow:0 2px 6px rgba(0,0,0,.15)}.notification-item__mark-read:active{transform:scale(.95)}.notification-item__mark-read:disabled{opacity:.5;cursor:not-allowed}.notification-item__mark-read:disabled:hover{background:transparent;border-color:var(--color-gray-300);color:var(--color-gray-500);transform:none}.notification-item__loading-spinner{width:12px;height:12px;border-top:2px solid var(--color-gray-300);border:2px solid var(--color-gray-300);border-top-color:var(--color-success-primary);border-radius:var(--rounded-full);animation:spin 1s linear infinite}.notification-item__title{font-weight:var(--font-weight-semibold);color:var(--color-gray-900);line-height:var(--leading-tight)}.notification-item__message,.notification-item__title{font-size:var(--text-sm);margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-item__message{color:var(--color-gray-700);line-height:var(--leading-relaxed)}.notification-item__triggered-by{font-size:var(--text-xs);color:var(--color-gray-500);font-style:italic}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}[data-theme=dark] .notification-item{border-bottom-color:var(--color-gray-700)}[data-theme=dark] .notification-item:hover{background:var(--color-gray-800)}[data-theme=dark] .notification-item--unread{background:var(--color-primary-900)}[data-theme=dark] .notification-item--unread:hover{background:var(--color-primary-800)}[data-theme=dark] .notification-item__title{color:var(--color-gray-100)}[data-theme=dark] .notification-item__message{color:var(--color-gray-300)}[data-theme=dark] .notification-item__type{background:var(--color-gray-700);color:var(--color-gray-300)}[data-theme=dark] .notification-item__time,[data-theme=dark] .notification-item__triggered-by{color:var(--color-gray-400)}[data-theme=dark] .notification-item__mark-read{border-color:var(--color-gray-600);color:var(--color-gray-400)}[data-theme=dark] .notification-item__mark-read:hover{background:var(--color-success-900);border-color:var(--color-success-primary);color:var(--color-success-primary)}@media(max-width:768px){.notification-item{padding:var(--space-3) var(--space-4)}.notification-item__icon-wrapper{width:36px;height:36px}.notification-item__message,.notification-item__title{font-size:var(--text-sm)}}@media(prefers-reduced-motion:reduce){.notification-item{transition:none}.notification-item__mark-read:active{transform:none}.notification-item__loading-spinner{animation:none}}.notification-preferences{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--rounded-lg);overflow:hidden}.notification-preferences__header{padding:var(--space-6) var(--space-6) var(--space-4);background:var(--color-gray-50);border-bottom:1px solid var(--color-gray-200)}.notification-preferences__title{font-size:var(--text-xl);font-weight:var(--font-weight-semibold);color:var(--color-gray-900);margin:0 0 var(--space-2)}.notification-preferences__description{font-size:var(--text-sm);color:var(--color-gray-600);margin:0;line-height:var(--leading-relaxed)}.notification-preferences__content{padding:var(--space-6)}.notification-preferences__section{margin-bottom:var(--space-8)}.notification-preferences__section:last-child{margin-bottom:0}.notification-preferences__section-title{font-size:var(--text-lg);font-weight:var(--font-weight-medium);color:var(--color-gray-800);margin:0 0 var(--space-4)}.notification-preferences__global-toggle{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background:var(--color-primary-50);border:1px solid var(--color-primary-200);border-radius:var(--rounded-md)}.notification-preferences__toggle-info{flex:1 1}.notification-preferences__toggle-info h4{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--color-gray-900);margin:0 0 var(--space-1)}.notification-preferences__toggle-info p{font-size:var(--text-sm);color:var(--color-gray-600);margin:0}.notification-preferences__switch{position:relative;display:inline-block;width:50px;height:24px}.notification-preferences__switch input{opacity:0;width:0;height:0}.notification-preferences__switch input:checked+.notification-preferences__switch-slider{background-color:var(--color-primary-600)!important}.notification-preferences__switch input:checked+.notification-preferences__switch-slider:before{transform:translateX(26px)}.notification-preferences__switch input:focus+.notification-preferences__switch-slider{box-shadow:0 0 0 2px var(--color-primary-500)}.notification-preferences__switch.disabled{opacity:.5;cursor:not-allowed}.notification-preferences__switch.disabled .notification-preferences__switch-slider,.notification-preferences__switch.disabled input{cursor:not-allowed}.notification-preferences__switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-gray-300);transition:var(--transition-base);border-radius:24px}.notification-preferences__switch-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:3px;background-color:var(--color-white);transition:var(--transition-base);border-radius:50%;box-shadow:var(--shadow-sm)}.notification-preferences__category{margin-bottom:var(--space-6)}.notification-preferences__category:last-child{margin-bottom:0}.notification-preferences__category-title{font-size:var(--text-base);font-weight:var(--font-weight-medium);color:var(--color-gray-700);margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-gray-200)}.notification-preferences__types{display:flex;flex-direction:column;gap:var(--space-3)}.notification-preferences__type{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--rounded-md);transition:var(--transition-base)}.notification-preferences__type:hover{background:var(--color-gray-100);border-color:var(--color-gray-300)}.notification-preferences__type-info{display:flex;align-items:center;gap:var(--space-3);flex:1 1}.notification-preferences__type-name{font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-800)}.notification-preferences__type-icon{width:20px;text-align:center}.notification-preferences__type-icon i{font-size:16px}.notification-preferences__checkbox{position:relative;display:flex;align-items:center;cursor:pointer}.notification-preferences__checkbox input{position:absolute;opacity:0;cursor:pointer}.notification-preferences__checkbox input:checked+.notification-preferences__checkbox-mark{background-color:var(--color-primary-600)!important;border-color:var(--color-primary-600)!important}.notification-preferences__checkbox input:checked+.notification-preferences__checkbox-mark:after{display:block}.notification-preferences__checkbox input:focus+.notification-preferences__checkbox-mark{box-shadow:0 0 0 2px var(--color-primary-500)}.notification-preferences__checkbox-mark{position:relative;height:18px;width:18px;background-color:var(--color-white);border:2px solid var(--color-gray-300);border-radius:var(--rounded-sm);transition:var(--transition-base)}.notification-preferences__checkbox-mark:after{content:"";position:absolute;display:none;left:5px;top:1px;width:4px;height:8px;border:solid var(--color-white);border-width:0 2px 2px 0;transform:rotate(45deg)}.notification-preferences__warning{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-warning-light);border:1px solid var(--color-warning-primary);border-radius:var(--rounded-md);margin-top:var(--space-4)}.notification-preferences__warning i{color:var(--color-warning-primary);font-size:18px;margin-top:var(--space-1)}.notification-preferences__warning p{font-size:var(--text-sm);color:var(--color-warning-dark);margin:0;line-height:var(--leading-normal)}.notification-preferences__info{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-gray-50);border-radius:var(--rounded-md);border-left:4px solid var(--primary-purple)}.notification-preferences__info .delivery-info{margin:0;font-size:var(--text-sm);color:var(--color-gray-600);line-height:var(--leading-relaxed)}.notification-preferences__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--color-gray-50);border-top:1px solid var(--color-gray-200)}.notification-preferences__error,.notification-preferences__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-6);text-align:center;gap:var(--space-4)}.notification-preferences__loading{color:var(--color-gray-600)}.notification-preferences__loading span{font-size:var(--text-sm)}.notification-preferences__error{color:var(--color-error-primary)}.notification-preferences__error p{font-size:var(--text-sm);font-weight:var(--font-weight-medium);margin:0}[data-theme=dark] .notification-preferences{background:var(--color-gray-800);border-color:var(--color-gray-600)}[data-theme=dark] .notification-preferences__header{background:var(--color-gray-900);border-bottom-color:var(--color-gray-600)}[data-theme=dark] .notification-preferences__title{color:var(--color-gray-100)}[data-theme=dark] .notification-preferences__description{color:var(--color-gray-300)}[data-theme=dark] .notification-preferences__section-title{color:var(--color-gray-200)}[data-theme=dark] .notification-preferences__global-toggle{background:var(--color-primary-900);border-color:var(--color-primary-700)}[data-theme=dark] .notification-preferences__toggle-info h4{color:var(--color-gray-100)}[data-theme=dark] .notification-preferences__toggle-info p{color:var(--color-gray-300)}[data-theme=dark] .notification-preferences__switch-slider{background-color:var(--color-gray-600)}[data-theme=dark] .notification-preferences__switch-slider:before{background-color:var(--color-white)}[data-theme=dark] .notification-preferences__category-title{color:var(--color-gray-300);border-bottom-color:var(--color-gray-600)}[data-theme=dark] .notification-preferences__type{background:var(--color-gray-700);border-color:var(--color-gray-600)}[data-theme=dark] .notification-preferences__type:hover{background:var(--color-gray-600);border-color:var(--color-gray-500)}[data-theme=dark] .notification-preferences__type-name{color:var(--color-gray-200)}[data-theme=dark] .notification-preferences__checkbox-mark{background-color:var(--color-gray-700);border-color:var(--color-gray-500)}[data-theme=dark] .notification-preferences__actions{background:var(--color-gray-900);border-top-color:var(--color-gray-600)}@media(max-width:768px){.notification-preferences__actions,.notification-preferences__content,.notification-preferences__header{padding-left:var(--space-4);padding-right:var(--space-4)}.notification-preferences__global-toggle{flex-direction:column;align-items:flex-start;gap:var(--space-4)}.notification-preferences__type{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.notification-preferences__actions{flex-direction:column-reverse;align-items:stretch}}