.notif-bell-wrap{position:relative}.notif-bell-btn{position:relative;font-size:1.1rem}.notif-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;padding:0 4px;display:flex;align-items:center;justify-content:center;line-height:1}.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:300px;max-height:380px;overflow-y:auto;border-radius:12px;z-index:1000;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006}.notif-dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;font-size:.85rem}.notif-clear-btn{background:none;border:none;color:#f472b6;font-size:.75rem;cursor:pointer}.notif-empty{padding:24px;text-align:center;opacity:.5;font-size:.85rem}.notif-list{list-style:none;margin:0;padding:4px 0}.notif-item{display:flex;align-items:flex-start;gap:8px;padding:8px 14px;font-size:.82rem;transition:background .15s}.notif-item:hover{background:#ffffff0a}.notif-item.unread{background:#f472b60d}.notif-icon{flex-shrink:0;font-size:.9rem}.notif-msg{flex:1;line-height:1.4}.notif-time{flex-shrink:0;opacity:.4;font-size:.75rem;padding-top:1px}.connection-banner{position:fixed;top:12px;left:50%;transform:translate(-50%);z-index:9999;padding:8px 20px;border-radius:20px;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:8px;animation:bannerSlideIn .3s ease;box-shadow:0 4px 16px #0000004d}.connection-banner.reconnecting{background:#f59e0bf2;color:#1a1a2e}.connection-banner.reconnected{background:#22c55ef2;color:#1a1a2e}.connection-banner-spinner{width:14px;height:14px;border:2px solid rgba(26,26,46,.3);border-top-color:#1a1a2e;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes bannerSlideIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}