:root{--notification-bg:#ffffff;--notification-border:#f1d6d7;--notification-shadow:rgba(204, 69, 73, 0.25);--notification-text:#1f2937;--notification-text-muted:#6b7280;--notification-header-bg:linear-gradient(135deg, #cc4549 0%, #a63639 100%);--notification-header-text:#ffffff;--notification-tab-bg:#f9fafb;--notification-tab-active-bg:#ffffff;--notification-tab-text:#6b7280;--notification-tab-active-text:#cc4549;--notification-item-bg:transparent;--notification-item-hover-bg:#fff5f5;--notification-unread-bg:#ffeaea;--notification-unread-border:#cc4549;--notification-accent:#cc4549;--notification-success:#10b981;--notification-warning:#f59e0b;--notification-error:#cc4549;--notification-scrollbar-track:#f3f4f6;--notification-scrollbar-thumb:#e5a0a2;--bell-bg:rgba(255, 255, 255, 0.15);--bell-bg-hover:rgba(255, 255, 255, 0.25);--bell-border:rgba(255, 255, 255, 0.3);--bell-border-hover:rgba(255, 255, 255, 0.5);--bell-text:#333;--bell-shadow:rgba(0, 0, 0, 0.1);--bell-shadow-hover:rgba(0, 0, 0, 0.2)}body.wp-night-mode-on{--notification-bg:#1f1f1f;--notification-border:#3a3a3a;--notification-shadow:rgba(204, 69, 73, 0.3);--notification-text:#f9fafb;--notification-text-muted:#9ca3af;--notification-header-bg:linear-gradient(135deg, #cc4549 0%, #992f32 100%);--notification-header-text:#ffffff;--notification-tab-bg:#2b2b2b;--notification-tab-active-bg:#1f1f1f;--notification-tab-text:#9ca3af;--notification-tab-active-text:#ffffff;--notification-item-bg:transparent;--notification-item-hover-bg:#2d2d2d;--notification-unread-bg:#3a2021;--notification-unread-border:#cc4549;--notification-accent:#cc4549;--notification-success:#10b981;--notification-warning:#f59e0b;--notification-error:#ef4444;--notification-scrollbar-track:#2b2b2b;--notification-scrollbar-thumb:#a85a5c;--bell-bg:rgba(0, 0, 0, 0.3);--bell-bg-hover:rgba(0, 0, 0, 0.5);--bell-border:rgba(255, 255, 255, 0.1);--bell-border-hover:rgba(255, 255, 255, 0.2);--bell-text:#f9fafb;--bell-shadow:rgba(0, 0, 0, 0.3);--bell-shadow-hover:rgba(0, 0, 0, 0.5)}.notification-container{position:relative;display:inline-block}.notification-bell{cursor:pointer;padding:10px;border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;background:var(--bell-bg);color:var(--bell-text);display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:2px solid var(--bell-border);backdrop-filter:blur(10px);box-shadow:0 2px 8px var(--bell-shadow)}.notification-bell:hover{background:var(--bell-bg-hover);border-color:var(--bell-border-hover);transform:scale(1.08);box-shadow:0 4px 12px var(--bell-shadow-hover)}.notification-bell:active{transform:scale(.95)}.notification-bell i{font-size:18px;filter:drop-shadow(0 1px 2px var(--bell-shadow));transition:all .3s cubic-bezier(.4,0,.2,1)}.notification-bell:hover i{transform:scale(1.1);filter:drop-shadow(0 2px 4px var(--bell-shadow-hover))}.notification-count-badge{position:absolute;top:-6px;right:-6px;background:linear-gradient(45deg,#ff4757,#ff3742);color:#fff;border-radius:50%;min-width:22px;height:22px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid #fff;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,71,87,.7)}70%{box-shadow:0 0 0 10px rgba(255,71,87,0)}100%{box-shadow:0 0 0 0 rgba(255,71,87,0)}}.notification-popup{position:absolute;top:calc(100% + 12px);right:0;width:420px;max-height:650px;background:var(--notification-bg);border-radius:16px;z-index:9999;overflow:hidden;border:1px solid var(--notification-border);display:none;visibility:hidden;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(20px)}.notification-popup.show{display:block!important;visibility:visible!important;opacity:1!important;animation:slideIn .4s cubic-bezier(.4,0,.2,1)}@keyframes slideIn{from{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.notification-header{background:var(--notification-header-bg);color:var(--notification-header-text);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}.notification-header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,.1),transparent);pointer-events:none}.notification-title{margin:0;font-size:17px;font-weight:600;position:relative;z-index:1}.notification-close{background:0 0;border:none;color:var(--notification-header-text);font-size:18px;cursor:pointer;padding:8px;border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.notification-close:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}.notification-close:active{transform:scale(.95)}.notification-content{max-height:580px;overflow:hidden}.notification-tabs{display:flex;background:var(--notification-tab-bg);border-bottom:1px solid var(--notification-border);position:relative}.notification-tabs::after{content:'';position:absolute;bottom:0;left:0;height:2px;width:50%;background:var(--notification-accent);transition:transform .3s cubic-bezier(.4,0,.2,1)}.notification-tabs[data-active-tab=unread]::after{transform:translateX(100%)}.notification-tab{flex:1;padding:16px 20px;background:0 0;border:none;cursor:pointer;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--notification-tab-text);display:flex;align-items:center;justify-content:center;gap:10px;position:relative}.notification-tab.active{background:var(--notification-tab-active-bg);color:var(--notification-tab-active-text);font-weight:600}.notification-tab:hover{background:var(--notification-item-hover-bg);transform:translateY(-1px)}.notification-count{background:var(--notification-text-muted);color:#fff;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;min-width:20px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.notification-tab.active .notification-count{background:var(--notification-accent);transform:scale(1.1)}.notification-actions{padding:16px 24px;background:var(--notification-tab-bg);border-bottom:1px solid var(--notification-border)}.mark-all-read-btn{background:0 0;border:1.5px solid var(--notification-accent);color:var(--notification-accent);padding:8px 16px;border-radius:24px;font-size:13px;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:6px;position:relative;overflow:hidden;margin:0 auto}.mark-all-read-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--notification-accent);transition:left .3s cubic-bezier(.4,0,.2,1);z-index:-1}.mark-all-read-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.3)}.mark-all-read-btn:hover::before{left:0}.mark-all-read-btn:active{transform:translateY(0)}.notification-list-container{max-height:400px;overflow-y:auto;position:relative}.notification-list-container::-webkit-scrollbar{width:8px}.notification-list-container::-webkit-scrollbar-track{background:var(--notification-scrollbar-track)}.notification-list-container::-webkit-scrollbar-thumb{background:var(--notification-scrollbar-thumb);border-radius:4px;transition:background .3s ease}.notification-list-container::-webkit-scrollbar-thumb:hover{background:var(--notification-accent)}.notification-loading{padding:60px 20px;text-align:center;color:var(--notification-text-muted)}.loading-spinner i{font-size:28px;margin-bottom:16px;animation:spin 1.5s cubic-bezier(.4,0,.2,1) infinite;color:var(--notification-accent)}.notification-loading p{margin:0;font-weight:500;font-size:14px}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.text-center{text-align:center}.text-warning{color:var(--notification-warning)!important}.text-muted{color:var(--notification-text-muted)!important}.btn{display:inline-block;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;border:1px solid transparent;border-radius:8px;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-sm{padding:6px 12px;font-size:13px;border-radius:6px}.btn-outline-primary{color:var(--notification-accent);border-color:var(--notification-accent);background-color:transparent}.btn-outline-primary:hover{color:#fff;background-color:var(--notification-accent);border-color:var(--notification-accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.3)}.notification-list{padding:0}.notification-item{padding:18px 24px;border-bottom:1px solid var(--notification-border);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:flex-start;gap:16px;position:relative;background:var(--notification-item-bg)}.notification-item:hover{background:var(--notification-item-hover-bg)}.notification-item.unread{background:var(--notification-unread-bg);border-left:4px solid var(--notification-unread-border);position:relative}.notification-item.unread::before{content:'';position:absolute;top:24px;right:24px;width:10px;height:10px;background:var(--notification-unread-border);border-radius:50%;animation:pulse-dot 2s infinite}@keyframes pulse-dot{0%{box-shadow:0 0 0 0 var(--notification-unread-border);opacity:1}70%{box-shadow:0 0 0 6px transparent;opacity:.7}100%{box-shadow:0 0 0 0 transparent;opacity:1}}.notification-avatar{width:44px;height:44px;flex-shrink:0;position:relative}.notification-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--notification-border)}.notification-avatar .default-avatar{width:100%;height:100%;background:var(--notification-header-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;border:2px solid var(--notification-border);box-shadow:0 4px 12px rgba(102,126,234,.2)}.notification-body{flex:1;min-width:0}.notification-message{font-size:14px;line-height:1.5;color:var(--notification-text);margin-bottom:8px}.notification-message a{color:inherit;text-decoration:none;transition:color .3s ease}.notification-message a:hover{color:var(--notification-accent)}.notification-message strong{color:var(--notification-accent);font-weight:600;display:block;margin-bottom:4px}.notification-time{font-size:12px;color:var(--notification-text-muted);display:flex;align-items:center;gap:4px;font-weight:500}.notification-type{display:inline-block;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:600;text-transform:uppercase;margin-top:8px;letter-spacing:.5px}.notification-type.comic{background:rgba(16,185,129,.1);color:var(--notification-success);border:1px solid rgba(16,185,129,.2)}.notification-type.chapter{background:rgba(245,158,11,.1);color:var(--notification-warning);border:1px solid rgba(245,158,11,.2)}.notification-empty{padding:60px 24px;text-align:center}.empty-state i{color:var(--notification-text-muted);margin-bottom:20px;opacity:.6}.empty-state h5{color:var(--notification-text);margin-bottom:12px;font-weight:600;font-size:16px}.empty-state p{color:var(--notification-text-muted);font-size:14px;margin:0;line-height:1.5}.notification-footer{padding:20px 24px;background:var(--notification-tab-bg);border-top:1px solid var(--notification-border);text-align:center}.view-all-notifications{background:0 0;border:1.5px solid var(--notification-accent);color:var(--notification-accent);padding:10px 20px;border-radius:24px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.view-all-notifications::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--notification-accent);transition:left .3s cubic-bezier(.4,0,.2,1);z-index:-1}.view-all-notifications:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.3)}.view-all-notifications:hover::before{left:0}@media (max-width:768px){.notification-popup{width:380px;right:-20px}.notification-header{padding:16px 20px}.notification-actions{padding:12px 20px}.notification-item{padding:16px 20px;gap:12px}}@media (max-width:480px){.notification-popup{width:340px;right:-40px;max-height:500px}.notification-list-container{max-height:300px}.notification-title{font-size:15px}}@media (max-width:400px){.notification-popup{width:300px;right:-60px}.notification-item{padding:12px 16px}.notification-header{padding:12px 16px}.notification-actions{padding:10px 16px}}.mark-all-read-btn,.notification-bell,.notification-item,.notification-popup,.notification-tab,.view-all-notifications{transition:background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}body.wp-night-mode-on .notification-popup{border-color:var(--notification-border);box-shadow:0 20px 40px rgba(0,0,0,.4),0 10px 20px rgba(0,0,0,.3)}body.wp-night-mode-on .notification-bell{background:var(--bell-bg);border-color:var(--bell-border);color:var(--bell-text)}body.wp-night-mode-on .notification-bell:hover{background:var(--bell-bg-hover);border-color:var(--bell-border-hover)}body.wp-night-mode-on .notification-item.unread{background:var(--notification-unread-bg);border-left-color:var(--notification-unread-border)}body.wp-night-mode-on .mark-all-read-btn:hover{box-shadow:0 6px 20px rgba(139,92,246,.3)}body.wp-night-mode-on .view-all-notifications:hover{box-shadow:0 6px 20px rgba(139,92,246,.3)}.mark-all-read-btn:focus,.notification-close:focus,.notification-tab:focus,.view-all-notifications:focus{outline:2px solid var(--notification-accent);outline-offset:2px}.mark-read-btn{background:var(--notification-accent);color:#fff;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;opacity:.7;position:absolute;top:12px;right:12px;font-size:12px}.mark-read-btn:hover{opacity:1;transform:scale(1.1);box-shadow:0 2px 8px var(--notification-shadow)}.mark-read-btn:active{transform:scale(.9)}.read-indicator{color:var(--notification-success);opacity:.6;position:absolute;top:12px;right:12px;font-size:14px}.notification-item{position:relative;padding-right:50px}@media (prefers-reduced-motion:reduce){.mark-all-read-btn,.mark-read-btn,.notification-bell,.notification-close,.notification-item,.notification-popup,.notification-tab,.view-all-notifications{transition:none;animation:none}.loading-spinner i,.notification-count-badge,.notification-item.unread::before{animation:none}}