.notification-bell-container{align-items:center;display:inline-flex;position:relative}.notification-bell-container .notification-bell-btn{width:38px;height:38px;box-shadow:none;color:var(--text-secondary,#94a3b8);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.notification-bell-container .notification-bell-btn .bell-icon{width:20px;height:20px;color:var(--text-secondary,#94a3b8);transition:all .2s}.notification-bell-container .notification-bell-btn:hover,.notification-bell-container .notification-bell-btn.active{color:#fff;background:#ffffff14;transform:translateY(-1px);box-shadow:0 0 14px #ffffff1a}.notification-bell-container .notification-bell-btn:hover .bell-icon,.notification-bell-container .notification-bell-btn.active .bell-icon{color:#fff;filter:drop-shadow(0 0 4px #fff6);transform:rotate(12deg)}.notification-bell-container .notification-bell-btn:active{transform:translateY(0)}.notification-bell-container .notification-bell-btn .unread-badge{color:#fff;background:linear-gradient(135deg,#ef4444 0%,#f97316 100%);border:1.5px solid #0a0a0f;border-radius:999px;justify-content:center;align-items:center;min-width:17px;height:17px;padding:0 4px;font-size:.65rem;font-weight:800;animation:2s ease-in-out infinite pulse-badge;display:flex;position:absolute;top:1px;right:1px;box-shadow:0 0 8px #ef444499}.notification-bell-container .notification-dropdown{-webkit-backdrop-filter:blur(16px);z-index:1050;background:#0d111cf7;border:1px solid #ffffff1f;border-radius:16px;width:390px;max-width:calc(100vw - 20px);animation:.2s cubic-bezier(.16,1,.3,1) dropdown-in;position:absolute;top:calc(100% + 16px);right:0;overflow:hidden;box-shadow:0 20px 50px #0009,0 0 30px #00f2fe14}.notification-bell-container .notification-dropdown .dropdown-header{background:#ffffff05;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:.5rem;padding:.85rem 1.15rem;display:flex}.notification-bell-container .notification-dropdown .dropdown-header .title-row{flex-shrink:0;align-items:center;gap:.45rem;display:flex}.notification-bell-container .notification-dropdown .dropdown-header .title-row h3{color:#f8fafc;margin:0;font-size:.95rem;font-weight:700;line-height:1}.notification-bell-container .notification-dropdown .dropdown-header .title-row .unread-counter{color:#00f2fe;letter-spacing:.02em;white-space:nowrap;background:#00f2fe14;border:1px solid #00f2fe40;border-radius:6px;justify-content:center;align-items:center;height:25px;padding:0 .5rem;font-size:.68rem;font-weight:700;line-height:1;display:inline-flex}.notification-bell-container .notification-dropdown .dropdown-header .header-actions{flex-shrink:0;align-items:center;gap:.35rem;display:flex}.notification-bell-container .notification-dropdown .dropdown-header .header-actions .header-action-btn{color:#94a3b8;cursor:pointer;white-space:nowrap;background:#ffffff0a;border:1px solid #ffffff17;border-radius:6px;align-items:center;gap:.25rem;height:25px;padding:0 .45rem;font-size:.68rem;font-weight:600;line-height:1;transition:all .15s;display:inline-flex}.notification-bell-container .notification-dropdown .dropdown-header .header-actions .header-action-btn .btn-icon{stroke-width:2.2px;flex-shrink:0;width:12px;height:12px}.notification-bell-container .notification-dropdown .dropdown-header .header-actions .header-action-btn .btn-label{line-height:1}.notification-bell-container .notification-dropdown .dropdown-header .header-actions .header-action-btn:hover{color:#f8fafc;background:#ffffff1a;border-color:#ffffff2e}.notification-bell-container .notification-dropdown .dropdown-header .header-actions .header-action-btn.clear-all-btn:hover{color:#f87171;background:#ef44441f;border-color:#ef44444d}.notification-bell-container .notification-dropdown .dropdown-body{max-height:380px;overflow-y:auto}.notification-bell-container .notification-dropdown .dropdown-body::-webkit-scrollbar{width:6px}.notification-bell-container .notification-dropdown .dropdown-body::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.notification-bell-container .notification-dropdown .dropdown-body .empty-notifications{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:3rem 1.5rem;display:flex}.notification-bell-container .notification-dropdown .dropdown-body .empty-notifications .empty-icon{color:#475569;opacity:.8;width:42px;height:42px;margin-bottom:.75rem}.notification-bell-container .notification-dropdown .dropdown-body .empty-notifications .empty-title{color:#cbd5e1;margin:0 0 .25rem;font-size:.95rem;font-weight:700}.notification-bell-container .notification-dropdown .dropdown-body .empty-notifications .empty-desc{color:#64748b;max-width:260px;font-size:.8rem;line-height:1.45}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list{flex-direction:column;display:flex}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item{cursor:pointer;border-bottom:1px solid #ffffff0a;align-items:flex-start;gap:.85rem;padding:.9rem 1.15rem;transition:background .15s;display:flex;position:relative}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item:last-child{border-bottom:none}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item:hover{background:#ffffff0d}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item:hover .item-actions-col .delete-item-btn{opacity:1;visibility:visible}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item.unread{background:#00f2fe0a}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item.unread .item-title{color:#fff;font-weight:700}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item.unread .item-message{color:#e2e8f0}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col{flex-shrink:0;margin-top:.15rem}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-type{width:22px;height:22px}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-type.verification{color:#10b981;filter:drop-shadow(0 0 6px #10b98166)}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-type.tip{color:#facc15;filter:drop-shadow(0 0 6px #facc1566)}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-type.copyright{color:#ef4444;filter:drop-shadow(0 0 6px #ef444466)}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-type.comment{color:#38bdf8}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-type.system{color:#a855f7}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-type.payout{color:#10b981;filter:drop-shadow(0 0 6px #10b98173)}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-type.shipment{color:#38bdf8;filter:drop-shadow(0 0 6px #38bdf873)}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .icon-col .icon-pick-wrap{filter:drop-shadow(0 0 6px #fbbf2473);justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .content-col{flex:1;min-width:0}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .content-col .item-title-row{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.2rem;display:flex}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .content-col .item-title-row .item-title{color:#cbd5e1;white-space:nowrap;text-overflow:ellipsis;font-size:.86rem;font-weight:600;overflow:hidden}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .content-col .item-title-row .item-time{color:#64748b;flex-shrink:0;font-size:.72rem}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .content-col .item-message{color:#94a3b8;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.79rem;line-height:1.4;display:-webkit-box;overflow:hidden}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .item-actions-col{flex-shrink:0;align-items:center;gap:.4rem;margin-top:.2rem;display:flex}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .item-actions-col .unread-dot{background:#00f2fe;border-radius:50%;flex-shrink:0;width:7px;height:7px;box-shadow:0 0 8px #00f2fecc}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .item-actions-col .delete-item-btn{color:#64748b;cursor:pointer;opacity:.4;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;transition:all .15s;display:flex}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .item-actions-col .delete-item-btn .delete-icon{width:14px;height:14px}.notification-bell-container .notification-dropdown .dropdown-body .notifications-list .notification-item .item-actions-col .delete-item-btn:hover{opacity:1;color:#f87171;background:#ef444426}@media (max-width:640px){.notification-bell-container .notification-dropdown{width:auto;max-width:none;max-height:calc(100dvh - 80px);position:fixed;top:66px;left:8px;right:8px;overflow-y:auto}}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pulse-badge{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.notification-detail-overlay{z-index:99999;-webkit-backdrop-filter:blur(10px);background:#000000c7;justify-content:center;align-items:center;padding:1rem;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.notification-detail-overlay .notification-detail-card{-webkit-backdrop-filter:blur(16px);background:#121622f5;border:1px solid #ffffff1f;border-radius:16px;flex-direction:column;width:100%;max-width:460px;max-height:calc(100vh - 2rem);padding:1.5rem;animation:.2s cubic-bezier(.16,1,.3,1) dropdown-in;display:flex;position:relative;box-shadow:0 20px 48px #000000bf,inset 0 1px 1px #ffffff1a}.notification-detail-overlay .notification-detail-card .modal-close-btn{color:#94a3b8;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex;position:absolute;top:1rem;right:1rem}.notification-detail-overlay .notification-detail-card .modal-close-btn:hover{color:#fff;background:#ffffff1f}.notification-detail-overlay .notification-detail-card .detail-header{align-items:flex-start;gap:12px;margin-bottom:1.25rem;padding-right:2rem;display:flex}.notification-detail-overlay .notification-detail-card .detail-header .icon-badge{background:#ffffff0d;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.notification-detail-overlay .notification-detail-card .detail-header .icon-badge .icon-type{width:22px;height:22px}.notification-detail-overlay .notification-detail-card .detail-header .icon-badge .icon-type.verification{color:#10b981;filter:drop-shadow(0 0 6px #10b98166)}.notification-detail-overlay .notification-detail-card .detail-header .icon-badge .icon-type.tip{color:#facc15;filter:drop-shadow(0 0 6px #facc1566)}.notification-detail-overlay .notification-detail-card .detail-header .icon-badge .icon-type.copyright{color:#ef4444;filter:drop-shadow(0 0 6px #ef444466)}.notification-detail-overlay .notification-detail-card .detail-header .icon-badge .icon-type.comment{color:#38bdf8}.notification-detail-overlay .notification-detail-card .detail-header .icon-badge .icon-type.system{color:#a855f7}.notification-detail-overlay .notification-detail-card .detail-header .header-text h3{color:#fff;margin:0 0 4px;font-size:1.05rem;font-weight:700;line-height:1.3}.notification-detail-overlay .notification-detail-card .detail-header .header-text .detail-time{color:#94a3b8;font-size:.75rem}.notification-detail-overlay .notification-detail-card .detail-body{background:#ffffff08;border:1px solid #ffffff0f;border-radius:12px;max-height:50vh;margin-bottom:1.25rem;padding:1.15rem;overflow-y:auto}.notification-detail-overlay .notification-detail-card .detail-body .detail-message{color:#e2e8f0;white-space:pre-line;word-break:break-word;margin:0;font-size:.9rem;line-height:1.6}.notification-detail-overlay .notification-detail-card .detail-footer{justify-content:flex-end;align-items:center;gap:10px;display:flex}.notification-detail-overlay .notification-detail-card .detail-footer .btn-close-detail{color:#cbd5e1;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:8px;justify-content:center;align-items:center;padding:8px 16px;font-size:.825rem;font-weight:600;transition:all .2s;display:inline-flex}.notification-detail-overlay .notification-detail-card .detail-footer .btn-close-detail:hover{color:#fff;background:#ffffff1f}.notification-detail-overlay .notification-detail-card .detail-footer .btn-action-detail{-webkit-backdrop-filter:blur(12px);color:#93c5fd;cursor:pointer;background:#3b82f626;border:1px solid #60a5fa59;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px 18px;font-size:.825rem;font-weight:700;transition:all .2s;display:inline-flex}.notification-detail-overlay .notification-detail-card .detail-footer .btn-action-detail:hover{color:#fff;background:#3b82f640;border-color:#93c5fd99}
